閉包的使用-高頻事件優化

函式節流

函式節流的概念
當一個函式或者事件觸發頻率高，將其觸發頻率降低
核心思想：在連續觸發的事件中，一定的時間內只執行一次我們的函式。

// 函式節流 核心思路 一定時間內 只執行一次程式碼
// 想要讓2次執行中間 有一個時間間隔
// 紀錄上一次的執行時間
// 獲得當前時間
// 1秒執行一次 
// 當前時間-上次執行的時間 > 1000ms
複製程式碼

function fn(callback,wait){//傳入回撥函式和延遲時間
    var prev = 0 ;//閉包呼叫的變數;
    return function(){
        var now =Date.now();//獲取當前時間戳
        var arg =arguments; //獲取事件傳參
        if(now-prev>wait){
            callback.apply(this,arg)//執行callback
            prev=now ;//記錄當前時間
        }
    }
}
var box =document.querySelector('.box');
box.addEventListener('mousemove',fn(funtion(){
    //你所要節流的 函式
    console.log('觸發');//例子
),1000)
複製程式碼

函式防抖

函式防抖的概念

類似於坐電梯，當所有人進來的時候他才會執行，如果期間不斷的有人進電梯那麼電梯將不會執行

核心思路：是指觸發時間後再n秒內只能執行一次，如果再n秒內又觸發了該事件，則從新計算時間

 function fn(callback,wait){
     var timer=null; //定義定時器 閉包變數
     return function(){
         var args =arguments;
         if(timer) clearTimeout(timer);
         timer =setTimeout(function(){
             callback.apply(this,arg);
         }.bind(this),wait)//定時器this指向window 重新指向引用物件 wait是傳入時間
     }
 }
 
var search = document.querySelector('#search');

search.addEventListener('keyup',fn(function(){
    	var url =`https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1441,21107,18560,29568,29221,28703&wd=${this.value}&cb=cb`;
    	//jsonp方式請求百度介面
        var script=document.createElement('script');
        script.src=url;
        document.body.appendChild(script);
        document.body.removeChild(script);
},1000))

function cb(data) {
    console.log(data);
}
複製程式碼