如何告诉我的 Jquery 命令行在每个命令行之后添加延迟答案

【问题标题】：How do I tell my Jquery command line to add a delay after each command line如何告诉我的 Jquery 命令行在每个命令行之后添加延迟
【发布时间】：2014-10-11 12:48:22
【问题描述】：

我有什么：

$(document).ready(function(e){
                // NL flag
    $(this).find("#topbar_nl").width('100%');
    $(this).find("#midbar_nl").width('100%');
    $(this).find("#botbar_nl").width('100%');
});

我需要它来做这样的事情：

$(document).ready(function(e){
                // NL flag
    $(this).find("#topbar_nl").width('100%');(wait for 2 seconds then go to next command line)
    $(this).find("#midbar_nl").width('100%');(wait for 2 seconds then go to next command line)
    $(this).find("#botbar_nl").width('100%');(wait for 2 seconds then go to next command line)
});

【问题讨论】：

标签： jquery delay wait

【解决方案1】：

嗯，你可以这样做

var arr =["#topbar_nl", "#midbar_nl", "#botbar_nl"], index = 0;
setInterval(function(){ // use setInterval for the delay
   if(index < arr.length) {
      $(this).find(arr[count]).width('100%'); // do the work
   }  index++; // update the index
}, 2000) // of 2 seconds

【讨论】：

没有更简单的方法来添加延迟吗？我知道 .delay() 一旦您在 1 个命令行中有多个操作就可以工作。有没有办法可以做到这一点或需要更少的代码？

【解决方案2】：

您可以为此使用animate 方法：

$(this).find("#topbar_nl").animate( { width: '100%' }, 2000, function() {
    $(this).find("#midbar_nl").animate( { width: '100%' }, 2000, function() {
        $(this).find("#botbar_nl").animate( { width: '100%' }, 2000 );
    });
});

【讨论】：

虽然这可行，但它会使width 动画持续 2 秒，这可能不是 OP 想要的。