2017-08-09 29 views
-1

デバウンス機能やJqueryでデバウンスする方法を探していました。アニメーションを積み重ねると、迷惑になることがあります。 HERESにコード:Jqueryのデバウンス機能?

function fade() { 
    $('.media').hide(); 
    $('.media').fadeIn(2000); 
} 
var debounce = false; 
function colorChange() { 

    if (debounce) return; 
    debounce = true; 
    $('.centered').mouseenter(function() { 
    $('.centered').fadeTo('fast', .25); 
    }); 
    $('.centered').mouseleave(function() { 
    $('.centered').fadeTo('fast', 1); 
}); 
} 

function colorChange2() { 
    $('.centered2').mouseenter(function() { 
    $('.centered2').fadeTo('fast', .25); 
}); 
$('.centered2').mouseleave(function() { 
    $('.centered2').fadeTo('fast', 1); 
}); 
} 

function colorChange3() { 
$('.centered3').mouseenter(function() { 
    $('.centered3').fadeTo('fast', .25); 
}); 
$('.centered3').mouseleave(function() { 
    $('.centered3').fadeTo('fast', 1); 
}); 
} 

function closerFade() { 
    $('.closer').hide(); 
    $('.closer').fadeIn(2000); 
} 

私はそれらのすべてで$(ドキュメント).ready(関数(){

を包んは??

+1

アニメーションを停止したいだけですか? – CumminUp07

+0

マウスを写真の上に置くと、アニメーションが開始されます。もう2回以上実行すると、アニメーションが構築されます。 – slikk

+0

必要な動作に応じて、このhttps://api.jquery.com/finish/をチェックしてみてください。アニメーションの停止、クリア、または終了のオプションが異なります – CumminUp07

答えて

1

をデバウンスする方法はあります私はちょうどunderscore.jsが含まれます私のプロジェクトでは、それが含まれていることをデバウンス機能を使用しています。それは素晴らしい作品。私は複数のプロジェクトでそれを使用しました。

http://underscorejs.org/#debounce

debounce_.debounce(機能、待って、[即時])を作成した後にミリ秒はそれが呼び出された最後の 時間から経過した待つまで、その 実行を延期する渡された関数の 新しいデバウンスバージョンを返します。入力の到着が停止した後にのみ が発生するような動作を実装する場合に便利です。たとえば、 のMarkdownコメントのプレビューのレンダリング、 のサイズ変更をやめた後のレイアウトの再計算などがあります。

待機間隔の最後に、関数は最も遅くdebounced関数に渡された 引数で呼び出されます。

immediate引数にtrueを渡すと、デバウンスは、 ウェイトの後端ではなく、先頭に 関数をトリガします。偶発的な事態を防ぐのに便利です 「送信」ボタンをダブルクリックして2回目の発砲を防ぎます。

var lazyLayout = _.debounce(calculateLayout, 300); 
$(window).resize(lazyLayout);