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之后......

对于LOOP有什么办法吗？

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