for循环中的jquery animate函数

时间:2016-02-24 21:05:46

标签: javascript jquery-animate

过去几天我一直在努力解决这个问题。我已经阅读了关于闭包的所有内容以及将它们放入循环中的问题。但是在循环中使用jquery animate函数对我来说不起作用。但也许我不明白封闭背后的实际点,这就是为什么我要问:) 所以,这是一个例子:

$(document).ready(function() {
var obj1 = $(".wraper");
for (var i = 0; i < 3; i++) {
    alert("Calling animate");
    obj1.animate({"opacity": 0.4}, 500, function() {     
        alert("Animate finished");
    });
}
});

我希望按如下方式调用序列:

  1. 调用动画
  2. Animate已完成
  3. 调用动画
  4. Animate已完成
  5. 调用动画
  6. Animate已完成
  7. 我得到的是:

    1. 调用动画
    2. 调用动画
    3. Animate已完成
    4. 调用动画
    5. Animate已完成
    6. Animate已完成
    7. 现在,在阅读了关闭闭包之后我会说这不是所有答案在这些情况下使用的问题,通常它与在函数声明中使用计数器i有关,但是这里它与顺序有关调用回调,我不知道jquery库如何调用animate回调,有人可以帮我这个吗?

      注意: 如果使用它是这样的:

          $(document).ready(function() {
             var obj1 = $(".wraper");
             for (var i = 0; i < 3; i++) (function(n) {
                 alert("Calling animate");
                 obj1.animate({"opacity": 0.4}, 500, function() {  
                    alert("Animate finished");
                 });
             })(i);
          }
      

      所以,将每次迭代作为一个自我执行的功能块(这就是我理解它的方法,如果我错了,请纠正我?),我得到与上面相同的结果!

1 个答案:

答案 0 :(得分:2)

而不是for循环,你可以使用递归匿名函数:

var i = 0;
(function recur() {
    if (i < 3) {
        i++;
        alert("Calling animate");
        obj1.animate({"opacity": 0.4}, 500, function() {     
            alert("Animate finished");
            recur();
        });
    }
})();