jQuery delay() - how to stop it?

Question

I already tried stop(true,true), stop(true) and clearQueue(); but this doesn't work.

I have problem with fast changing slides, i already have some function what have to reset everything, but it doesn't work.

function reset(){    $('div').clearQueue();    $('#img').html('').css({'left':0,'right':0,'opacity':1,'z-index':1});    $('#img2').html('').css({'left':0,'right':0,'opacity':1,'z-index':1});    $('#place').html('');$('#place').html('<div id="img"></div><div id="img2"></div>'); } 

But i thing this doesn't stop (or delete) delay() function on animations. So I don't know if i don't have to use setTimeout function.

Here is piece of animation script:

reset(); actual_slide=2;   $('#img').html('<img src="'+image[4]+'" alt="Obrázek">').css({'opacity':0,'z-index':2}).delay(time_delay/5).fadeTo(time_fast,1).delay(time_delay*2).fadeTo(time_fast,0);   $('#img2').html('<img src="'+image[3]+'" alt="Obrázek">').css({'opacity':'0','top':0}).fadeTo(time_fast,1).animate({'top':'-495'},time_delay*3,function(){     if(actual_slide==2){$('#img2').css({'top':0}).fadeTo(time_fast*2,0).html('');}else{reset();}     if(actual_slide==2){$('#img').html('<img src="'+image[3]+'" id="1" alt="Obrázek">').fadeTo(time_fast*2,'1').css({'left':-300,'top':-700}).animate({'left':-900,'top':-700},time_delay*2);}else{reset();}     if(actual_slide==2){$('#1').css({'width':1365,'height':1200}).animate({'width':1665,'height':1400},time_delay*2);}else{reset();}   });                           

That actual_slide have to protect it before repeating that function, but that doesn't work too.. Problem is when i fast changing slides, because that reset doesn't stop everything, and it start doing things what i don't want to have in (like change picture to other and other).

Answer 1

You can break .delay() by .dequeue() function

here is example

//this is only for make sure that we skip 'delay', not other function var inDelay = false;  function start() {     $('.gfx').animate     ({         width: 100     }, function(){inDelay = true}).delay(3000).animate     ({         width: 0     }, function(){inDelay = false}) }  function breakTheDelay() {     if(inDelay)     {         $('.gfx').dequeue();     } } 

http://jsfiddle.net/wasikuss/5288z/

//edit: more complex example provided with logging timestamps and cleanup ( without cleanup, multiple clicks on Start is unpredictable ) to prove that it works

http://jsfiddle.net/q0058whc/

or below

//this is only for make sure that we skip 'delay', not other function  var inDelay = false;  var ltime = 0;    // console log will aways show 'end' values: 2000, 1000 an 400  // values may be different due to time wasted on calling functions  // sometimes delay is shorten by 0-200ms, it can be caused by js engine probably      function start()  {      cleanup();      ltime = (1*new Date());      $('.gfx').queue('fx', function(next)      {        logtime( 'animate1_start' );      	$('.gfx').animate        ({            width: 100        }, 2000, function(){logtime('animate1_end');inDelay = true;})        next();      })      .queue('fx', function(next)      {      	logtime('delay_start');      	next()      })      .delay(1000)      .queue('fx', function(next)      {      	logtime('delay_end');      	next()      })      .queue('fx', function(next)      {      	logtime('animate0_start');      	$('.gfx').animate        ({            width: 0        }, function(){logtime('animate0_end');inDelay = false;})        next()      });  }    function cleanup()  {  		// remove current queue      $('.gfx').clearQueue()      // first animate runned interval. stop it       .stop()      // reset width of element      .css('width',0)  }    function logtime( name )  {  	var ntime = (1*new Date());  	console.log( name + ': ' + ( ntime - ltime ) );    ltime = ntime;  }    function breakTheDelay()  {      if(inDelay)      {          $('.gfx').dequeue();      }  }    //  // version without 'inDelay' check only if you know what are you doing  // http://jsfiddle.net/wasikuss/hkw9H/  //

.gfx  {      background: red;      width: 0;      height: 10px  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <button onclick="start()">Start</button>  <button onclick="breakTheDelay()">Can't wait!</button>  <div class="gfx"></div>

Answer 2

From the jQuery delay page:

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Take a look at the doTimeout plugin; it may be what you are looking for.

I hope this helps!