js函式中的節流和防抖

1. 概念

• 函式節流（throttle）是指一定時間內執行一次操作，也就是說預先設定一個執行週期，當呼叫時刻動作大於等於執行週期則執行該動作，然後進入下一個新週期，一個比較形象的例子是如果將水龍頭擰緊直到水是以水滴的形式流出，那你會發現每隔一段時間，就會有一滴水流出。
• 函式防抖（debounce）是指在一定時間內，在動作被連續頻繁觸發的情況下，動作只會被執行一次，也就是說當呼叫動作過n秒後，才會執行該動作，若在n秒內又呼叫此動作則將重新計算執行時間，所以短時間內的連續動作永遠只會被觸發一次，比如說按住一個彈簧，它將不會彈起直到你鬆手為止。

2.例子：

• 節流（mousemove實時獲取滑鼠位置）

<div>X:<span id="x"></span></div>
<div>y:<span id="y"></span></div>(function($){
    let $x = $('#x');
    let $y = $('#y');
    var canRun = true;
    $(document).on('mousemove',function(event){
        let e = event || window.event;
        if(!canRun){
            return;
        };
        canRun = false;
        setTimeout(function(){
            $x.text(e.pageX);
            $y.text(e.pagey);
            canRun = true;
        },100)
    }) 

})(jquery)複製程式碼

• 防抖（聯想搜尋）

(function($){
    let $s = $('#s');
    let $suggestion = $('#suggestion');
    let timer = null;
    $s.on('keyup',function(){
        timer&&clearTimeout(timer);
        timer = setTimeout(handleChange,500);
    });
    
    function handleChange(){
        let s = $s.val();
        $suggestion.empty();
        fetchBaiduSuggest(s,function(word,result){
            result.map(function(w){
             $('<option/>').val(w).text(w).appendTo($suggestion);
            });
        });
    };
    
    function fetchBaiduSuggest(word,cb){
        $.getJSON("http://suggestion.baidu.com/su?wd="+encodeURIComponent(word)+"&cb=?",function(data){})
            if($.isArray(data.s)){
                cd(word,data.s)
            }
        }
})(jquery)複製程式碼