web-dev-qa-db-ja.com

jQuery delay（）-それを止める方法は？

私はすでに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('<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();}
  });

そのactual_slideは、その関数を繰り返す前にそれを保護する必要がありますが、それも機能しません。問題は、スライドを高速で変更すると、リセットしてもすべてが停止せず、やりたくないことを開始するためです。 in（画像を他の画像に変更するなど）。

jquerydelaysettimeoutjquery-animate
20
wutter

JQueryから delay ページ：

.delay（）メソッドは、キューに入れられたjQueryエフェクト間の遅延に最適です。制限があるため（たとえば、遅延をキャンセルする方法は提供されません）、. delay（）はJavaScriptのネイティブsetTimeout関数の代わりにはなりません。これは、特定のユースケースに適している場合があります。

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

これがお役に立てば幸いです。

12
dSquared

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

以下

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

経由 この投稿 非常に単純なアプローチがあります。それは.animateの代わりに.delayを使用することです。

5
Jack James

私は、ユーザーがアニメーションチェーンを何度も何度も、時にはアニメーションの途中ですばやく再起動することを望んでいました。したがって、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
        });
    });
});
1
thyancey