setTimeout传递参数问题

setTimeout passing arguments issue

本文关键字：问题 参数 setTimeout      更新时间：2023-09-26

我正在尝试传递元素和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之后，然后。

有FOR循环的方法吗?

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

试试这样写:

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

您需要一个闭包来为每次循环的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);
}

您是想让它们排队，还是在它们全部滑动之前等待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);

除非你打算让它们同时动画，否则你不能以这种方式在循环中设置它们。如果你这样做，它们几乎是同时执行的，正如你所说，你实际上只会看到最后一个。

您需要在前一个任务完成后触发每个后续任务。用回调将它们链接在一起。

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

编辑鉴于这里的其他答案，我将补充说，您可能希望将暂停时间从10ms增加到100毫秒，然后使用其他人建议的* I解决方案。用10ms乘以i不会得到很多明显的延迟。我将从100毫秒开始，如果这太不稳定，那么以10毫秒的增量向下移动，直到你得到一个让你满意的动画。

相关文章：