setTimeout傳遞參數問題

Question

我正在嘗試通過元素的索引和slideUp延遲每個列表項的內容

這是我的代碼

    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。 然后，您將獲得想要的結果。

編輯給定這里的其他答案，我要補充一下，您可能希望將暫停時間從10ms增加到大約100，然后使用其他人建議的* i解決方案。 我乘以10毫秒不會以明顯的延遲讓您受益匪淺。 我將從100毫秒開始，如果太生澀，則以10毫秒為增量從那里向下移動，直到獲得讓您滿意的動畫為止。