jQueryの遅延() - それを停止する方法?

私はすでにstop(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 1.8.3で動作しています。
追加された 著者 jmcollin92,

4 答え

.dequeue()関数で .delay()を破ることができます

ここは例です

//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
追加された
この回答は正しくありません...遅延は止められません。 デモプロンプトを何度かクリックし、停止を続けます。それは遅れを止めるものではありません。私のupvoteを撤回する。
追加された 著者 Moon,
デキュー()は私を救った、ありがとう!
追加された 著者 Marcus Mansur,
いいえ、これは完全には機能しません。ちょうどクリックを開始するよりも素早くそれらの2つのボタンをクリックしようとすると、アニメーションは適切な時間を待たずに、immidietlyまたはいくつかの奇妙な遅延
追加された 著者 Max Yari,
いいえ! 「Can not wait!」をクリックするとアニメーション中に "Start"を押すと、期待通りに動作しません。遅れている間にアニメーションが完了するのを待ちます。「待てない!」と "スタート"。それは何度も何度も幅を100pxにアニメーション化する必要があります。
追加された 著者 wasikuss,
@MaxYari、はい。 Start は現在のキューを気にしないためです。質問は「どのように.delay()を停止するか」ではなく、「複数のクリックからアプリケーションと保護を書き込む方法」です。最初のアニメーションが終了するのを待つと、3秒の遅延があります。 停止をクリックして停止します。私はより多くの保護と修正されたサンプルを追加します...
追加された 著者 wasikuss,
ありがとう、これも私を救った:)
追加された 著者 Raver0124,
これで演奏すると、デキューはディレイの最終結果をキャンセルしますが、ディレイはキャンセルされません。表示されている例ではアニメーションを取り消すことができますが、3秒以内にもう一度クリックすると遅延はまだ実行されており、アニメーションは再びキャンセルされます。
追加された 著者 paj,

jQuery 遅延ページから:

.delay()メソッドは、キューに入れられたjQuery   効果。制限されているため、たとえば、   遅延をキャンセルする.delay()はJavaScriptのネイティブの代わりには使用できません   setTimeout関数は、特定の用途により適しています   ケース。

doTimeout プラグインを見てください。それはあなたが探しているものかもしれません。

私はこれが助けて欲しい!

11
追加された
私はなぜjQueryの停止メソッドも遅延を停止しないことを理解していない。 +1だけど - doTimeoutプラグインを使って私の問題を解決した。
追加された 著者 net.uk.sweet,
requestAnimationFrameのために、キューとアニメーションでsetTimeoutを使用しようとすると、2つが同期しなくなる可能性があるため、問題が発生します。
追加された 著者 James Westgate,
答えてくれてありがとう、私は通常のsetTimeoutでそれを試して、今はほとんど動作している。しかし、今私はちょうど2つのタイマーをどうにかして同期させる必要があります。
追加された 著者 wutter,

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

5
追加された
私は、 .animate 呼び出しの短いバージョンである .fadeTo(delayMs、1)を使用しました。それでも問題が発生した場合、なぜ4年前に遅延バグが修正されたのかまた、 .delay は、これを修正するためにボンネットの下でアニメーションを使用するだけの理由もありません。
追加された 著者 Roman Starkov,
遅延バグは修正されています。遅延が止まっているだけなので、残りのキューを続行できるので、 stop(true)が必要です。遅延をスキップするだけで残りのキューに入れられたアニメーションを続行する場合は、 stop(false)という意味があります。
追加された 著者 Simon_Weaver,
ちょっと参考のために、ページが消えた場合、 'arniarent'は次のように書いています:animate()をdelay()の代わりに使うことで問題を回避する方法を見つけました: $( '#element')。 (不透明度:1)、200、 'ease&zwnj; OutExpo')。アニメーション(不透明度:0)、1000&zwnj;この場合 delay(2000)として動作しますが、取り消すことはできません。
追加された 著者 Domenico De Felice,

アニメーションの途中で何度も何度も何度もアニメーションチェーンを再起動させたいと思っていました。そこで、 {"null":1} にアニメーション化された delay()を使用する代わりに、ここでは簡単なフェードイン/フェードアウトがあります。私のために働いたようだ!

//- 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
追加された