Затримка jQuery () - як це зупинити?

Я вже пробував зупинити (true, true), stop (true) і clearQueue (); але це не спрацьовує.

У мене є проблема з швидкими змінами слайдів, у мене вже є деяка функція, що потрібно скинути все, але це не працює.

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

Але я все це не зупиняю (або видаляю) функцію delay() на анімаціях. Тому я не знаю, чи не потрібно використовувати функцію setTimeout.

Ось шматок сценарію анімації:

reset();
actual_slide=2;
  $('#img').html('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('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('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();}
  });                          

Що actual_slide повинен захистити його, перш ніж повторювати цю функцію, але це також не працює. Проблема в тому, коли я швидко змінюю слайди, тому що це скидання не зупиняє все, і він починає робити те, що я не хочу в (наприклад, змінити картинку на інші та інші).

17
bugs.jquery.com/ticket/6150 - схоже, що вони виправлені в jQuery 1.7 кандидат на випуск. Завантажте це та перевірте, чи він вирішує вашу проблему, або прочитайте звіт про помилку щодо можливих шляхів вирішення проблем.
додано Автор Blazemonger, джерело
Також: можливий дубльований jQuery: затримка() або таймаут із зупинкою ()?
додано Автор Blazemonger, джерело
Я просто спробував це, і це працює з jQuery 1.8.3.
додано Автор jmcollin92, джерело

4 Відповіді

Ви можете зламати .delay() функцією .dequeue()

ось приклад

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

// редагування: більш складний приклад, що містить дані про часові позначки журналу та очищення (без очищення, неодноразове натискання на Start непередбачуване), щоб довести, що він працює

http://jsfiddle.net/q0058whc/

або нижче

<div class="snippet" data-lang="js" data-hide="true"> <div class="snippet-code snippet-currently-hidden">

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

20
додано
ця відповідь не правильна ... затримка не припиняється. демонстрація . кілька разів клацніть рядок і продовжуйте натискати кнопку. Це не зупиняє затримку. зняти мою версію.
додано Автор Moon, джерело
dequeue() врятував мене, спасибі!
додано Автор Marcus Mansur, джерело
Ні, це не спрацьовує повністю, просто спробуйте швидко натиснути на ці дві кнопки купу разів, ніж натиснути кнопку "Почати", анімація не буде чекати власного часу і виходитиме назад і назад або з незвичайною затримкою
додано Автор Max Yari, джерело
ні! Якщо натиснути "Не можу чекати!" під час анімації, а потім "Пуск", це не буде працювати, як ви очікували. Зачекайте, анімація fot завершується, тоді під час затримки натисніть "Не можу чекати!" і "Почати". Потрібно повернутися назад і знову оживити ширину до 100 пікселів.
додано Автор wasikuss, джерело
@MaxYari, так, оскільки Start не хвилює поточну чергу. Питання було "Як зупинити .delay ()", ні "Як написати додаток та захист від кількох кліків". Якщо ви чекаєте першого завершення анімації, то затримка триває 3 секунди. Натисніть Stop , щоб зламати його. Я додам модифікований зразок з більшою захистом ...
додано Автор wasikuss, джерело
спасибі, це також мене врятувало :)
додано Автор Raver0124, джерело
Якщо ви граєте з цим, ви побачите, що декуляція скасовує кінцевий результат затримки, але не скасовує затримку. У наведеному прикладі ви можете скасувати анімацію, але якщо натиснути ще раз протягом 3 секунд, затримка все ще працюватиме, а анімація знову скасовується.
додано Автор paj, джерело

З сторінки jQuery затримки :

Метод .delay() найкращий для затримки між черги jQuery   ефекти Бо це обмежене - це, наприклад, не пропонує спосіб   скасувати затримку .delay() не є заміною рідної версії JavaScript   функція setTimeout, яка може бути більш відповідною для певного використання   випадки.

Погляньте на плагін doTimeout ; це може бути те, що ви шукаєте.

Я сподіваюсь, це допоможе!

11
додано
Я не розумію, чому метод зупинки jQuery також не зупинить затримку. Хоча +1 - використання плагіна doTimeout вирішило мою проблему.
додано Автор net.uk.sweet, джерело
Проблема виникає при спробі використання setTimeout з чергами та анімаціями через requestAnimationFrame, які можуть вийти з синхронізації.
додано Автор James Westgate, джерело
Спасибі за відповідь, я спробував це з нормальним setTimeout, і тепер він практично працює. Але тепер я просто повинен якось синхронізувати два таймери.
додано Автор wutter, джерело

Via this post there's a very simple approach, which is to use .animate in place of .delay

5
додано
Я використав .fadeTo (delayMs, 1) , який є коротшою версією виклику .animate . Мені дуже цікаво, чому помилка затримки позначена 4 роки тому, коли вона все ще є проблемою, і також чому .delay не може просто використовувати анімацію під капотом, щоб виправити це.
додано Автор Roman Starkov, джерело
Виправлена ​​помилка затримки IS виправлена ​​- вам просто потрібно stop (true) , оскільки без нього ви зупиняєте лише затримку, а решту черги можна продовжувати. stop (false) буде мати сенс, якщо ви хочете пропустити лише затримку, але потім продовжити з іншими анімаціями в черзі.
додано Автор Simon_Weaver, джерело
Як посилання, якщо ця сторінка зникне, "arniarent" писав: Я знайшов спосіб вирішити проблему, використовуючи анімацію() як заміну для затримки (): $ ('# element'). Stop (true , false). анімація ({непрозорість: 1}, 200, «легкість», OutExpo). анімація ({і розваги: ​​1}, 2000 р.). аніме & (а) ({непрозорість: 0}, 1000 & zwnj; , 'easeInQuint'); анімація ({непрозорість: 1}, 2000) у цьому випадку працює як delay (2000) , але його можна скасувати.
додано Автор Domenico De Felice, джерело

Я хотів, щоб користувач швидко перезапускав анімаційну ланцюг знову і знову, іноді посередині анімації. Таким чином, замість використання delay() я анімував до фальшивої CSS omy ("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
        });
    });
});
1
додано