setTimeout 传递参数问题

Question

我正在尝试传递元素索引并延迟滑动每个列表项内容

这是我的代码

    for(var i = 1; i <= $("#colContainer li").length ; i++) {
        var el = $("#colContainer li:nth-child(" + i + ") .colContent");

        var delay = function() {
            slide(el);
        };
        setTimeout(delay, 10);
        function slide(el){
            el.slideUp();
        };
    };

但每次只有最后一个向上滑动

我期望他们从索引 1 滑动到末尾延迟

我也试过了

    index = $(this).parent("li").index();
    for(var i = 1; i <= $("#colContainer li").length ; i++) {
        (function(i) {
            var el = $("#colContainer li:nth-child(" + i + ") .colContent");

            var delay = function() {
            slide(el);
            };
            setTimeout(delay, 10);
            function slide(el){
            el.slideUp();
            };
        })(i);
    };

但它们都同时滑动，我想要索引 1 幻灯片，然后是索引 2 和 ...

对于循环有什么办法吗？？

Answer 1

这是因为var el 的作用域是功能块，而不是循环块。

试试这样的：

for( var i=1; ......) { (function(i) {
    var el = ...
    // rest of your code, unchanged
})(i); }

Answer 2

您需要一个闭包来限定循环的每次迭代的 el 值。

for(var i = 1; i <= $("#colContainer li").length ; i++) {
  var el = $("#colContainer li:nth-child(" + i + ") .colContent");
  (function(el) {
    setTimeout(function(){
        el.slideUp();
    },10);
  })(el);
}

但是，这仍然会导致它们同时进行动画处理，如果这是所需的结果，您可以使用 jQuery 一步完成所有操作。 如果您希望他们一次制作一个动画，您可以这样做：

for(var i = 1; i <= $("#colContainer li").length ; i++) {
  (function(i) {
    var el = $("#colContainer li:nth-child(" + i + ") .colContent");
    setTimeout(function(){
        el.slideUp();
    }, i * 10);
  })(i);
}

Answer 3

您是想让它们排队还是延迟 10 毫秒，然后它们全部滑上去？

您需要for 循环吗？

下面的不是后者吗？

setTimeout(function() {
   $("#colContainer li .colContent").slideUp();
}, 10);

排队幻灯片示例：

(function slideContent(index) {
   $("#colContainer li:nth-child(" + index + ") .colContent").slideUp();
   if ($("#colContainer li:nth-child(" + (index + 1) + ") .colContent").length == 1) {
      setTimeout(function() { slideContent(index + 1); }, 250);
   }
})(1);

Answer 4

除非您的意图是让它们同时具有动画效果，否则您不能以这种方式将它们设置为循环。如果这样做，它们会（几乎）同时执行，正如您所说，您实际上只会看到最后一个。

您需要从前一个完成后触发每个连续的。将它们与回调链接在一起。

delay 应该设置下一个 setTimeout。然后你就会得到你想要的结果。

编辑 鉴于此处的其他答案，我将补充一点，您可能希望将暂停时间从 10 毫秒增加到 100 毫秒，然后使用其他人建议的 *i 解决方案。将 10 毫秒乘以 i 不会以明显延迟的方式为您带来很多。我会从 100 毫秒开始，如果这太生涩，则以 10 毫秒的增量从那里向下移动，直到你有一个让你开心的动画。