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

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

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

3 个答案: