Question

所以，我有一些字符串加载到一个名为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("");

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

我正在考虑this page超时的工作方式，也许我误解了。看起来它的工作方式与Thread.sleep（）在Java / C＃中的工作方式相同

Answer 1

如 @Jonathan Lonowski 的评论中所述，两个区间都是基本同时运行。

修改

示例：

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

setTimeout不会破坏上面代码的同步流程无论func1有多长，这两个函数（func2和[DELAY]）都会流畅地执行。
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

Answer 2

尝试使用.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>

如何让两个事件发生延迟

2 个答案: