停止循环功能setTimeout

Question

我有一个使用setTimeout的循环，如下所示：

<button onclick="clickStop()">stop</button>

<script type="text/javascript">
    let i = 0;
    let sett;
    function timeOut(counter) {   
        sett = setTimeout(function () {
            $.get("./test3.php", {data_id: counter}, (data) => {
                console.log(data);
                i++;
                timeOut(i);
            });
        }, 1000);
        if(counter >= 10) {
            clearTimeout(sett);
            alert("Done!");
        }
    }
    timeOut(i);
    function clickStop() {
        clearTimeout(sett);
    }
</script>

但是当我点击停止按钮不起作用时，请帮助我！

Answer 1

您可以清除超时并设置一个标志，该标志将警告$.get中的回调，当它返回时，它不应调用timeOut() ：

 let i = 0; let sett; let active = true // should the loop continue? function timeOut(counter) { if (counter < 10){ sett = setTimeout(function () { $.get("./test3.php", {data_id: counter}, (data) => { console.log(data); i++; if (active) timeOut(i); // only if active }); }, 1000); } else { alert("Done!"); } } timeOut(i); function clickStop() { active = false // stop loop clearTimeout(sett); // and clear current timeout } 

Answer 2

您的JS似乎运行良好，请参见下文，当我单击“停止”按钮时，计数器会增加并停止。 问题是与$.get("./test3.php" ...

您能详细说明一下ajax调用的预期响应是什么吗？

另外，如果您可以描述您要做什么，我们可以为您提供一些最佳实践的指导，因为正如评论的人所述，在循环中运行XHR / ajax调用通常不是一个好主意。

 <button onclick="clickStop()">stop</button> <script type="text/javascript"> let i = 0; let sett; function timeOut(counter) { sett = setTimeout(function () { timeOut(counter+1); console.log(counter); }, 1000); if(counter >= 10) { clearTimeout(sett); alert("Done!"); } } timeOut(i); function clickStop() { clearTimeout(sett); } </script> 

Answer 3

$.get响应处理程序中的timeout(i)会重新启动循环，即使您已将其停止。 您可以使用标志来控制它。

 let i = 0; let sett; let status = true; let url = "http://placekitten.com/200/300"; function timeOut(counter) { sett = setTimeout(function () { $.get(url, (data) => { console.log(i); i++; // repeat if status flag is true if(status) timeOut(i); }); }, 1000); if(counter >= 10) { clearTimeout(sett); status = false; // set status flag to false alert("Done!"); } } function clickStop() { clearTimeout(sett); status = false; // set status flag to false } timeOut(i); 

 <button onclick="clickStop()">stop</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>