停止循环函数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

您的 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 2

您可以清除超时并设置一个标志，该标志将提醒 $.get 中的回调它不应该在 returns:

时调用 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 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>

停止循环函数setTimeout

Stop loop function setTimeout

javascript

loops

settimeout