jquery .delay() inside setInterval

Question

I'm using setInterval with jQuery delay.

But the delay() inside setInterval seems not to be working or it does not wait for 3 seconds (in setInterval).

My goal:

wait 3 seconds first
print Hello word 10
then wait 2 seconds to fadeout
wait 3 seconds
print hello word 9
and so on...

The snippet below shows it only waits 2 seconds and prints..

count = 10;
// store setInterval ID in var
var interval = setInterval(function(){
  // log value of count
  console.log(count);

   $('.output').append(
    " hello world"+count+"<br>"
    ).hide().fadeIn(1000).delay(2000).fadeOut('slow');

    if(count <= 0) {
      // if count reaches 10 the clear using interval id
      clearInterval(interval);
    } else {
      // otherwise increment count
         count--;
     }
  }, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>

That's because setInterval does not wait for fadeOut to finish — Bsalex, Nov 26 '17 at 22:45
This sounds like you really want promises https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call/14220323#14220323 — Mark Schultheiss, Nov 26 '17 at 23:11

score 1 · Accepted Answer · answered Nov 26 '17 at 22:50

I suggest using setTimeout to wait for fadeOut to finish the animation.

count = 10;
setTimeout(function onTimeout(){
  // log value of count
  console.log(count);

   $('.output').append(
    " hello world"+count+"<br>"
    ).hide().fadeIn(1000).delay(2000).fadeOut('slow', function() {
      if(count > 0) {
        count--;
        setTimeout(onTimeout, 3000);
      } 
    });
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>

Yeah. Nice. I'm glad to help you. Could you mark it as the correct answer then? — Bsalex, Nov 28 '17 at 15:04

charlietfl · Answer 2 · 2017-11-26T22:54:47.030

Use a recursive call to a function when last animation completes instead. It's very difficult to synchronize setTinterval with a series of animations and not have one get ahead of the other and the difference gets more exaggerated over time

Something like:

var delay =1000;//speeded up dfor demo
var count = 10;
// store setInterval ID in var
function counter() {
  // log value of count
  console.log(count);

  $('.output').append(
    " hello world" + count + "<br>"
  ).hide().fadeIn(1000).delay(2000).fadeOut('slow', function() {
    // fadeOut finished, decide to do it again or not
    if (count > 0) {
      count--;
      // call function again          
      setTimeout(counter,delay);
    }
  });
}

setTimeout(counter,delay)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>

score 0 · Answer 3 · answered Nov 26 '17 at 23:00

The best to achieve your goal is to use setTimeout instead of setInterval. You can use it like this way :

<script>


//alert("js");

function fadeOut()
{
    alert('do fadeout here');
}

function hello()
{
    alert('say hello word');

    setTimeout(fadeOut,2000);
}

function first()
{
    setTimeout(hello,3000);
}

//setTimeout(null,3000);
setTimeout(first(), 3000)  ;  
//alert('hello');

</script>

Hope it helps.

score 0 · Answer 4 · answered Nov 28 '17 at 04:29

this is my solution. thank you @chcharlietfl

count = 10;
setTimeout(function onTimeout(){
  // log value of count
  console.log(count);

   $('.output').append(
    " hello world"+count+"<br>"
    ).hide().fadeIn(1000).delay(2000).fadeOut('slow', function() {
      if(count > 0) {
        count--;
        setTimeout(onTimeout, 3000);
      } 
    });
}, 3000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>

this answer is probably a duplication of below one. – A.D. Nov 28 '17 at 05:01 — A.D., Nov 28 '17 at 05:01

jquery .delay() inside setInterval

4 Answers4