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)