Jquery /javascript通过循环设置多个超时，一个接一个地独立运行

jquery/javascript set multiple timeouts one after the other via loop to run independently of the other

本文关键字：一个 运行 独立 超时 javascript 循环 设置 Jquery      更新时间：2023-09-26

我试图动画一些div的向上滚动，但我希望一个在另一个之后暂停后向上滚动。现在我能想到的最好的就是

$('.curtain').each(function()
{
    var $elem = $(this);
    setTimeout(function()
    {
        $elem.animate({"height":0+'px'}, 2000);
    }, 1000);
});

问题是他们仍然一起动画没有暂停。我怎么能这样做呢?div是动态生成的，可能有5 - 20个，所以做硬编码的逻辑是过时的，有什么想法吗?

function animateIt () {
    var elems = $('.curtain').get();
    (function next() {        
        if(elems.length){
            var elem = $(elems.shift());
            elem.animate({"height":0+'px'}, 2000, next);
        }
    })();
}
animateIt();

运行示例另一种方式是queue 
function animateIt () {
    var divs = $('.curtain');
    divs.each( function(){
        var elem = $(this);
        $.queue(divs[0],"fun", function(next) { elem.animate({"height":0+'px'}, 2000, next); });               
    });
    divs.eq(0).dequeue("fun");
}

看起来一个简单的递归函数可能在这里为您工作-

function doAnimation(elapsed){
  var iterations = $('.curtain').length;
  var current = elapsed+1;
  if (current <= iterations){
   setTimeout(function(){
      $('.curtain:eq(' + elapsed + ')').animate(...);
      doAnimation(current);
    },50);
  }
}
doAnimation(0);

下面是一个简单的示例

相关文章：