Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2013
    Posts
    38
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Clear timeouts in loop

    The code below appends numbers in sequence from 1 to 10 when the start button is clicked. I'd like to use clearTimeout to cancel the operation when the stop button is clicked.

    It seems to me that a dynamic variable must be created (where x is currently assigned the doSetTimeout function), but I have not yet found a way to do so. Any suggestions?

    Thanks!

    Code:
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    
    <script>
    function doSetTimeout(func, func_param, time) {
        setTimeout(function(){func(func_param);}, time);
    }
    
    function createNode(base) {
        var node = document.createElement("p");
        var writeI = base + "";
        var textnode = document.createTextNode(writeI);
        node.appendChild(textnode);
        document.body.appendChild(node);
    }   
    
    $(document).ready(function() {
            $("#start").click(function() {
                for (var i = 1; i <= 10; i++) {
                    var time = i*1000;
                    var x = doSetTimeout(createNode, i, time);
                }           
            });
    });         
    </script>
    </head>
    <body>
        <button id="start">Start</button>
        <button id="stop">Stop</button>
    </body>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,462
    Thanks
    0
    Thanked 633 Times in 623 Posts
    Your doSetTimeout isn't returning anything so x will always be undefined. You need to return the value returned from setTimeout() in order to transfer the value to x that will be needed to do the clearTimeout.

    function doSetTimeout(func, func_param, time) {
    return setTimeout(function(){func(func_param);}, time);
    }
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Jun 2013
    Posts
    38
    Thanks
    5
    Thanked 0 Times in 0 Posts
    thanks for the pointer! how would you proceed from there?

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,466
    Thanks
    3
    Thanked 495 Times in 482 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <head>
    
    <script>
    
    function createNode(id,run) {
        var o=createNode[id];
        if (!o){
         o=createNode[id]={n:0};
        }
        clearTimeout(o.to);
        if (run&&o.n<10){
         o.n++;
         var node = document.createElement("p");
         var writeI = o.n + "";
         var textnode = document.createTextNode(writeI);
         node.appendChild(textnode);
         document.body.appendChild(node);
         o.to=setTimeout(function(){  createNode(id,run); },run);
       }
    }
    
    </script>
    </head>
    <body>
        <button id="start">Start</button>
        <button id="stop">Stop</button>
    <script type="text/javascript">
    /*<![CDATA[*/
    document.getElementById('start').onclick=function(){ createNode('start',1000) };
    document.getElementById('stop').onclick=function(){ createNode('start') };
    /*]]>*/
    </script></body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •