Question

单击开始按钮时，下面的代码按顺序从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>

Answer 1

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

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

javascript清除循环中的超时

1 个答案: