javascript - jQuery - 使用嵌套的 setTimeout 暂停 for 循环

Question

我正在尝试使用 Timeout 来暂停一个 for 循环，该循环将为某些元素设置动画。我想让一些按钮一个接一个地展开。

目前我有两个问题。第一个是 eq.(j) 似乎有一个元素索引 1 大于它看起来应该的。另一个是它跳到最后一个动画。

 for (j = 0; j<=numberOfButtons; j++){
    setTimeout(function() { 
         $buttons.eq(j).animate({
            height: buttonBig,
            width: buttonBig
        },150, 'linear');
    }, 3000 * (j + 1)); 
 }

这是我第一次使用 stackoverflow，如果我发布的问题正确，请告诉我。

提前感谢您的帮助。

Answer 1

使用临时范围。您正在调用异步函数 setTimeout...

在您的代码中，您使用 settimeOut() 函数安排事件。当您的代码运行时，一次迭代不会在调用 settimeOut() 函数后等待。它只是继续安排 j=0 到 j<=numberOfButtons 的所有 setTimeout 事件。然后js继续执行循环下面剩下的代码，直到超时事件发生……

当超时事件发生时，所有超时事件都被调度，j的值等于numberoOfButtons...

现在 javascript 中使用的另一个概念开始起作用了。这个概念被称为“范围”。函数的范围可以定义为函数可以访问的变量(不是一个非常准确的定义)。在 javascript 中，一个函数的范围也包括它的父函数的变量(不仅是父函数，祖 parent 的变量等等......)...

在您的代码中，当超时事件发生时，将调用回调函数。当执行回调时，每个回调引用的 j 值并不是你想的那样。 j 的值等于父函数中的 numberOfButtons。因此，所有回调在执行导致意外行为的回调时都引用该值。

我所做的是添加另一个函数，输入参数为 j，并调用它。在循环的每次迭代中调用此函数，将 j 设置为新值。现在，当执行回调时，父函数不是具有 for 循环的函数。父函数是我添加的匿名函数。该匿名函数的 j 值对于每个函数都是局部的并且不同。因此，当执行回调时，它们会引用它们应该引用的 j 值。这就是它给出预期行为的原因。

for (j = 0; j<=numberOfButtons; j++){
    (function(j){
       setTimeout(function() { 
         $buttons.eq(j).animate({
            height: buttonBig,
            width: buttonBig
        },150, 'linear');
      }, 3000 * (j + 1)); 
   })(j); 
 }