JavaScript 清除循环中的超时

下面的代码在单击开始按钮时按顺序从 1 到 10 附加数字。我想在单击停止按钮时使用clearTimeout取消操作。

在我看来，必须创建一个动态变量（其中 x 当前被分配了 doSetTimeout 函数），但我还没有找到这样做的方法。有什么建议吗？

谢谢！

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

获取 setTimeout 的返回值，将其保留在列表中，并在单击"停止"时清除它。

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]);
        }
    });
});

这也可能清除已经完成的超时，但我怀疑这真的非常重要。

相关内容

最新更新

热门标签：