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