How do I create a delay in js akin to sleep()

Question

I need to create a delay in js. I could use setTimeout but then the code continues to execute. During the delay, I want the script to do nothing. Is there any way to do this?? To be more clear: Eg. If I am doing two animations.

1)first animation. 2)delay(nothing is done for a second) 3)second animation.

EDIT:

First Animation:

  function animateScreen() {
  var audio = new Audio("http://www.sounds.beachware.com/2illionzayp3may/illwavul/CLNKBEEP.mp3");
  $("body").toggleClass("wrongSeries");
  audio.play();
}

function wrongChoice() {

  animateScreen();
  setTimeout(animateScreen, 100);

}

2) delay

3) Second Animation:

animateYellow(true);
      setTimeout(function() {
        animateYellow(false);
      }, 500);



function animateYellow(lightup) {

  if (lightup) {
    var audio = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");
    audio.play();
  }
  $("#4").toggleClass("animateYellow");

}

This is the code I am currently using. The second animation exists for four different colors.

Put your code in distinct blocks that can be called independently and use timers. You shouldn't block your code from execution. — Reinstate Monica Cellio, Jun 02 '16 at 15:44
by timers, do you mean setTimer and clearTimer?? Currently my code for the animations are in different blocks but they are being called via setTimeout one after another. Even if I do the same with timer, wouldn't the result be same ?? — leoOrion, Jun 02 '16 at 15:48
I do mean by using `setTimeout()`, yes. If you post some code I can show you what I mean. Just post a couple of functions that run animations and I'll give you an example. — Reinstate Monica Cellio, Jun 02 '16 at 15:53
Ive edited the question to include some code. Not sure if this example is understandable. Tell me if Im not clear. — leoOrion, Jun 02 '16 at 16:00
Are the animations css transitions? Also, do you care about when the audio stops playing, or is that not relevant to the animation flow? — Reinstate Monica Cellio, Jun 02 '16 at 16:02
Yes the animations are simple background changes(change color and then back to original color again). Would like the audio to play for a duration between these changes. — leoOrion, Jun 02 '16 at 16:31
Are you using, or can you use, jQuery? If so you can do all that you need with event handling, rather than timouts — Reinstate Monica Cellio, Jun 02 '16 at 16:44
The second animation is activated through a click event . Full Code Here: http://codepen.io/jpninanjohn/pen/JKoYqR — leoOrion, Jun 02 '16 at 16:55

How do I create a delay in js akin to sleep()

0 Answers0