CODEWITHSUNDEEP
javascriptloopstimeout
drenl
drenl

Reputation: 1333

javascript 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!

<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>

Upvotes: 0

Views: 454

Answers (1)

Halcyon
Halcyon

Reputation: 57703

Get the return value of setTimeout, keep it in a list, and clear it when you click stop.

function doSetTimeout(func, func_param, time) {
    return setTimeout(function(){func(func_param);}, time);
}

$(document).ready(function() {
    var timeouts = [];
    $("#start").click(function() {
        for (var i = 1; i <= 10; i++) {
            var time = i*1000;
            timeouts.push(doSetTimeout(createNode, i, time));
        }     
    });
    $("#stop").click(function () {
        for (var i = 0; i <= timeouts.length; i += 1) {
            clearTimeout(timeouts[i]);
        }
    });
});

This might also clear timeouts that have already finished, but I doubt that's really very important.

Upvotes: 2

Related Questions