JQuery delay() - как его остановить?

Ответ 1

На странице jQuery delay:

Метод .delay() лучше всего подходит для задержки между jQuery в очереди последствия. Поскольку он ограничен - он, например, не предлагает способ отменить задержку..delay() не является заменой для родного JavaScript setTimeout, которая может быть более подходящей для определенного использования случаев.

Взгляните на doTimeout плагин; это может быть то, что вы ищете.

Надеюсь, это поможет!

Ответ 2

Вы можете разбить .delay() на .dequeue() function

вот пример

//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: более сложный пример с метками времени регистрации и очисткой (без очистки, несколько кликов на Start является непредсказуемым), чтобы доказать, что он работает

http://jsfiddle.net/q0058whc/

или ниже

//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>

Ответ 3

Через этот пост существует очень простой подход, который заключается в использовании .animate вместо .delay

Ответ 4

Я хотел, чтобы пользователь быстро перезапускал анимационную цепочку снова и снова, иногда в середине анимации. Поэтому вместо того, чтобы использовать delay(), я анимировал фальшивый CSS-код {"null":1}. Здесь простое затухание/затухание. Кажется, сработало для меня!

//- fade in
$el.stop().animate({"opacity":1}, 200, "easeInSine", function(){
    //- delay for 2000ms
    $el.stop().animate({"null":1}, 2000, function(){
        //- fade out
        $el.stop().animate({"opacity":0}, 1000, "easeInOutSine", function(){
            //- final callback
        });
    });
});