Underscore.js中_.throttleと_.debounceの違い

1689 ワード

自動回転https://blog.coding.net/blog/the-difference-between-throttle-and-debounce-in-underscorejs
Underscore.jsは優れた在庫で、圧縮後は5.2 KBしかないです.それは数十種類の関数式プログラミングの方法を提供して、標準ライブラリの不足を補いました.JavaScriptのプログラミングがとても便利になりました.本論文はUnderscore.jsの二つの関数方法だけを検討する.throttleと_.debounceの原理、効果と用途.通常の関数(または方法)呼び出しプロセスは、要求、実行、および応答の3つの部分に分けられる.(「要求」は「呼び出し」と同じ意味で、「応答」は「戻り」と同義で、より良い表現のために要求と応答の表現を意図的に採用する.)ある場面では、マウスの移動やウィンドウサイズの調整に応答するイベントなど、トリガの頻度が高い.少しの処理関数が複雑であれば、多くの演算実行時間が必要となり、応答速度がトリガ周波数に追いつかず、しばしば遅延が発生し、仮死やカード頓感が生じる.資源が足りない時、一番直感的な解決方法はハードをアップグレードすることです.確かにより良いハードウェアを買うことで部分的な問題を解決することができますが、そのために高いコストを支払う必要があります.特にクライアントとサーバモードは、クライアントがハードウェアを統一的にアップグレードすることはほぼ不可能です.リソースが限られている場合、処理関数は高周波起動に即座に応答できない.第二に、部分的な要求だけに応答してもいいですか?ある場面での密集性要求は、強い同質性と連続性を備えている.例えば、マウスの移動の軌跡パラメータ.応答が適時であればあるほど、効果は滑らかになりますが、応答速度が追いつかないと、かえってカードの実感が現れます.throttleとdebounceは、要求と応答速度の不一致問題を解決する2つのスキームである.両者の違いは異なる策略を選ぶことにある.エレベーターはタイムアウトして毎日の通勤ビルの下のエレベーターを想像します.エレベーターを一回の運送を完成して、類比は一回の関数の実行と応答です.エレベーターには二つの運行戦略があると仮定し、タイムアウトは15秒に設定し、容量制限を考慮しない.スロットル戦略のエレベーター.エレベーターが初めて人が入ったら、15秒後に時間通りに一回を運送して、待たないことを保証します.もし誰もいないなら、待機します.debounce策略のエレベーターです.エレベーターの中に人が入ったら、15秒待ってください.また人が入ったら15秒でタイムアウトします.運送を開始します.
使用例_.throttle使用例
function log( event ) {
  console.log( $(window).scrollTop(), event.timeStamp );
};
//            ,           
$(window).scroll( log );
//            , 250ms      
$(window).scroll( _.throttle( log, 250 ) );
_.debounce使用例
function ajax_lookup( event ) {
 //       $(this).val()   Ajax   
};
//               ,Ajax        。
$('input:text').keyup( ajax_lookup );
//      250         
$('input:text').keyup( _.debounce( ajax_lookup, 250 ) );