javascript - 如何停止setTimeout递归

Question

我创建了 setTimeout，它有一个名为 run 的回调，在 run 中我调用了 console.log(i) 来使用 i++ 打印 I 的值一旦达到 50，我想用 clearTimeout 清除 setTimeout，我再次调用 setTimeout 并运行使其递归，但它不起作用。 有人可以帮助我更好地理解这个概念吗？

let i = 1;

var abc = setTimeout(function run(){
   console.log(i);
if(i==50){
    abc1();
  }  
  i++;
  setTimeout(run,100);
},100);
function abc1(){
     clearTimeout(abc);
}

Answer 1

当您调用setTimeout时，您将获得返回的计时器的ID。这正是您在这里所做的:

var abc = setTimeout(function run(){

但是，该 ID 仅在延迟函数执行之前有效。一旦做了，就没有效果了。当您调用 setTimeout(run,100); 时，您将获得计时器的新 ID。您需要再次捕获它，否则 ID 会丢失并且您无法阻止它。

还有一个最后的考虑因素 - 即使您要正确捕获调用 abc = setTimeout(run, 100); 的 ID，您当前的代码仍然不会停止计数器，因为它会尝试停止当前正在运行的函数(不执行任何操作)，而不是取消下一个函数的执行:

let i = 1;

var abc = setTimeout(function run() {
  console.log(i);
  if (i == 50) {
    abc1(); //this will clear the *current* timer 
  } 
  i++;
  abc = setTimeout(run, 100); //this will set the *new* ID 

}, 100);

function abc1() {
  clearTimeout(abc);
}

为了停止执行，您有两种选择。如果您想使用最初的想法，您需要在计划后取消 future 的执行

let i = 1;

var abc = setTimeout(function run() {
  console.log(i);
  abc = setTimeout(run, 100); //this will set the *new* ID 
  if (i == 50) {
    abc1(); //this will clear the *new* timer now
  }
  i++;
}, 100);

function abc1() {
  clearTimeout(abc);
}

或者，您可以完全不使用计时器句柄，而只使用 if 条件来确定是否要安排另一次执行:

let i = 1;

setTimeout(function run() {
  console.log(i);
  if (i != 50) { //until 50 is reached
    abc = setTimeout(run, 100); //schedule a new execution
  }
  i++;
}, 100);