如何使两个事件在它们之间有延迟地发生

How to get two events to occur with delay between them

本文关键字：延迟 之间 何使两 事件      更新时间：2023-09-26

那么，我有几个字符串加载到一个名为messages的数组中。我想在没有显示任何消息的半秒周期内循环查看消息。我的代码应该这样做，但由于某种原因它没有。没有文字显示

下面是我的代码: 
        function NextElement()
        {
            var x = messages.shift();
            messages.push(x);
            return x;
        }
        function doer()
        {
            $("p.message").text(NextElement());
        }
        function doer2()
        {
            $("p.message").text("");
        }
        $( document ).ready(function() 
        {
         setInterval( doer,1000);
         setTimeout(function() {}, 500);
         setInterval( doer2,1000);
        });

如果删除这一行

       $("p.message").text("");

消息显示，但不会在半秒后消失。

我正在看这个页面超时是如何工作的，也许我误解了。它似乎不像Java/c#中的thread.sleep()那样工作

正如@Jonathan Lonowski在评论中提到的，这两个间隔基本上是同时运行的。

编辑

的例子:

func1();
setTimeout(CODE, [DELAY]);
func2();

setTimeout不会破坏上述代码的同步流。
无论[DELAY]有多长，func1和func2函数都可以流畅地执行。
setTimeout实际上只是延迟 CODE。

function NextElement(){
    var x = messages.shift();
    messages.push(x);
    return x;
}
function doer(){
    $("p.message").text(NextElement());
    setTimeout(doer2, 1000);
}
function doer2(){
    $("p.message").text("");
    setTimeout(doer, 500);
}
doer();

JSFiddle

尝试使用.queue() 

var messages = ["", "a", "", "b", "", "c", "", "d", "", "e", "", "f", "", "g"],
p = $("p.message");
(function cycle() {
  p.delay(500, "messages").queue("messages", $.map(messages, function(msg) {
    return function(next) {
      $(this).text(msg);
      setTimeout(next, 500)
    }
  })).dequeue("messages").promise("messages").then(cycle)
}())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<p class="message"></p>

相关文章：