Question

我希望在延迟1秒后显示三条消息：

request.upload.addEventListener('progress',function(e){
    setTimeout(function() {
        $form.find('.progress-bar').width(percent+'%').html("first message");
    }, 1000);
    setTimeout(function() {
        $form.find('.progress-bar').width(percent+'%').html("second message");
    }, 1000);
    setTimeout(function() {
        $form.find('.progress-bar').width(percent+'%').html("third message");
    }, 1000);
}

但我在屏幕上只显示＆＃34;第三条消息＆＃34;。

Answer 1

只需在后两个上使用更长的延迟，可能是1000,2000，然后是3000。

示例：

＆＃13;

var $form = $("form");
$("input").on("click", function(e){
    var percent = 50; // dummy var
    setTimeout(function() {
        $form.find('.progress-bar').width(percent+'%').html("first message");
    }, 1000);
    setTimeout(function() {
        $form.find('.progress-bar').width(percent+'%').html("second message");
    }, 2000);
    setTimeout(function() {
        $form.find('.progress-bar').width(percent+'%').html("third message");
    }, 3000);
});

＆＃13;

.progress-bar {
  display: inline-block;
}

＆＃13;

<input type="button" value="Click Me">
<form>
  <div class="progress-bar"></div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

也就是说，当你发现自己重复完全相同的代码而只是一个小变化时，它就是重构的机会。例如：

["first message", "second message", "third message"].forEach(function(msg, index) {
    setTimeout(function() {
        $form.find('.progress-bar').width(percent+'%').html(msg);
    }, 1000 * (index + 1));
});

注意我们使用索引（0,1,2）加1加倍超时，因此它们会连续出现。

示例：

＆＃13;

var $form = $("form");
$("input").on("click", function(e){
    var percent = 50; // dummy var
    ["first message", "second message", "third message"].forEach(function(msg, index) {
        setTimeout(function() {
            $form.find('.progress-bar').width(percent+'%').html(msg);
        }, 1000 * (index + 1));
    });
});

＆＃13;

.progress-bar {
  display: inline-block;
}

＆＃13;

<input type="button" value="Click Me">
<form>
  <div class="progress-bar"></div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

＆＃13;

Answer 2

将每个超时放在上一个超时中，或者更好，使用setInterval！

这样的事情更容易管理：

var messages = ['first', 'second', 'third'];
var index = 0;
var interval = setInterval(function(){
  if (index >= messages.length) {
    clearInterval(interval); 
  }
  $form.find('.progress-bar').width(percent+'%').html(messages[index]);
  index++;
}, 1000);

setInterval与setTimeout的工作方式类似，不同之处在于它重复了回调方法而不是一次调用它。要记住的一件事是你需要清除间隔，否则它将永远运行。

如何在多个超时后进行多次超时？

2 个答案: