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

当超时事件发生时，调度所有超时事件，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); 
 }