javascript - 在每个函数中的最后一个元素动画之后执行一些操作

Question

我想在每个函数中的最后一个元素动画之后做一些事情。 我尝试了下面的代码，但它似乎不起作用。

$(".menu").click(function() {
    var elems = $('.top-menu ul li'),
        i = 0;
    elems.each(function(i) {
        i += 1;
        $(this).delay(70*i).fadeIn(300);
        if(i == elems.length) {
          $('.bodyWrapper').addClass('noBodyScroll');
        }
    });
});

Answer 1

你已经很接近了，只需将其移动到 fadeIn 回调中，而不需要自己管理i； jQuery 已将其作为第一个参数提供给您的 each 回调:

$(".menu").click(function() {
    var elems = $('.top-menu ul li');
    elems.each(function(i) {
        $(this).delay(70*i).fadeIn(300, function() {       // ***
          if(i == elems.length - 1) {                      // *** note the - 1
            $('.bodyWrapper').addClass('noBodyScroll');
          }
        });
    });
});

这不存在循环回调问题，因为每次调用 each 回调都会获得自己的 i 参数，该参数不会更新.

请注意，我在第一个 70*i 之前留下了 i。如果第一个元素延迟 70 毫秒很重要，您可能需要继续增加 i (这只发生一次):

$(".menu").click(function() {
    var elems = $('.top-menu ul li');
    elems.each(function(i) {
        ++i;                                            // ***
        $(this).delay(70*i).fadeIn(300, function() {
          if(i == elems.length) {                       // *** note the - 1 is gone
            $('.bodyWrapper').addClass('noBodyScroll');
          }
        });
    });
});