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

Question

我试图使用超时来暂停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中，函数的作用域也包括其父函数的变量（不仅是父变量，祖父母变量等等）。

在您的代码中，发生超时事件时，将调用回调函数。 当执行回调时，每个回调所引用的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); 
 }