How to get two events to occur with delay between them

Question

So, I have a few a strings loaded into an array called messages. I want to cycle through the messages with a half second period where no message is showing. My code should do that, but for whatever reason it doesn't. No text shows at all.

Here is my code:

        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);
        });

If if remove this line

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

messages show, but don't disappear after half a second.

I was looking at this page for how timeout works and perhaps I misunderstood. It seems it doesn't work the same way as thread.sleep() does in Java/C#

The 2 interval timers start and run at essentially the same time. So, each message is probably being removed immediately after it's shown. — Jonathan Lonowski, Sep 21 '15 at 03:36
Why would this be the the case? I thought that was what setTimeout(function() {}, 500); was taking care of to space them out. — Alexander Ryan Baggett, Sep 21 '15 at 03:50
The html structure is a single empty p element with the class "message" I do not believe it to be worth showing. — Alexander Ryan Baggett, Sep 21 '15 at 03:53
@AlexanderRyanBaggett Currently, the timeout is invoking an empty function and timers don't automatically stack after each other, so it has no affect. To delay its start, the interval would have to be set inside of the `function` provided to the timeout -- `setTimeout(function () { setInterval(doer2, 1000); }, 500);` — Jonathan Lonowski, Sep 21 '15 at 04:17

Artur Filipiak · Accepted Answer · 2015-09-21T13:08:15.560

As mentioned in comments by @Jonathan Lonowski, both intervals are basicaly running at the same time.

EDIT

Example:

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

setTimeout does not break synchronous flow of the code above.
Both of the functions (func1 and func2) will execute fluently no matter how long the [DELAY] is.
setTimeout is actually delaying only the 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

Could you explain to me why this use of timeout is correct, my use of it was incorrect? — Alexander Ryan Baggett, Sep 21 '15 at 03:54

score 1 · Answer 2 · answered Sep 21 '15 at 04:10

Try using .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>

How to get two events to occur with delay between them

2 Answers2