如何停止 setTimeout 递归

Question

我创建了 setTimeout，它有一个名为 run 的回调，在运行中我调用了 console.log(i) 以使用 i++ 打印 I 的值，一旦达到 50，我想清除 setTimeout使用clearTimeout，我再次调用 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);
}

为了停止执行，您有两个选择。如果你想使用你最初的想法，你需要取消未来的执行在它被安排

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);

Answer 2

问题在于你的操作顺序。

if(i==50){
    abc1();
  } 

如果 i 达到 50，将调用函数 abc1() - 清除间隔。

i++;
setTimeout(run,100);

在这里您正在重新开始间隔。 您需要将其包装在 else 块中。

let i = 1;

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

function abc1() {
  clearTimeout(abc);
}

Answer 3

let i = 1;

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

},100);

只有在计时器没有用完时才应该运行超时。

Answer 4

run() 中的 setTimeout() 未分配给任何变量，因此无法以任何方式清除。

我想你想要的是覆盖 abc 所以你必须替换：

setTimeout(run,100);

通过

abc = setTimeout(run,100);

Answer 5

由于var abc 仅设置一次，在第一次超时时，您只清除第一次超时，这很可能已经完成。

SetTimeout 返回一个数值，这是一个用于引用该任务的 ID。当你调用clearTimeout时，你必须告知ID你要清除的超时时间，现在你正在通知ID为第一次超时，已经结束，因此无法清除。

如果您希望清除上次超时，也许您希望始终使用每次超时的 ID 更新 abc，如下所示：

 abc = setTimeout(run,100);

Answer 6

这是一种奇怪的定时循环方式，但你只需要清除（实际上在这种情况下不是，但我还是喜欢这样做，因为一旦你不再使用它们就释放资源是一个好习惯）在创建新超时之前（通过跟踪 abc 句柄完成）并在给定条件下在clear 之后返回：

let i = 1;

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

function abc1(){
  clearTimeout(abc);
}

Answer 7

你需要在调用 abc1 函数后添加 return。您清除了超时，但代码仍在运行并再次调用 setTimeout(run,100)。

        let i = 1;

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