函數節流閉包
一個函數執行一次後,只有大於設定的執行週期纔會執行第二次,防止高頻率的屢次執行app
情景:函數
監聽頁面滾動時,輸出‘我滾動了’,處於優化性能考慮,不但願每次事件觸發時就輸出,而是在觸發的狀況下每隔200ms執行一次。性能
1 /* 2 節流函數 3 @param fn 要被節流的函數 4 @param delay 規定的間隔時間 5 */ 6 function throttle(fn, delay) { 7 var lasttime = 0; //上次執行的時間 8 return function () { //此處用閉包,就是爲了記錄lasttime,lasttime不會立刻被銷燬,也不會從新被聲明賦值 9 var nowtime = Date.now();//本次執行的時間 10 if (nowtime - lasttime > delay) { //本次減上次時間大於delay時執行fn 11 fn.call(this); //修正this指向問題 12 lasttime = nowtime; //執行完fn後,從新賦值lasttime 13 } 14 } 15 } 16 // onscroll右邊的值必須是個函數,恰好throttle()調用後的返回值是return後的函數 17 window.onscroll = throttle(function () { 18 console.log('我滾動了') 19 }, 200);
防抖函數優化
一個須要頻繁處罰的函數,在規定的時間內,只讓最後一次生效,前面的不生效。this
情景:spa
重複點擊某個按鈕,最快的二次點擊爲300mscode
1 function debounce(fn, delay) { 2 var timer = null;//記錄上次的延時器 3 return function () { //此處用閉包,爲了記錄timer 4 clearTimeout(timer); //清除上次的計時器 5 timer = setTimeout(function () { //從新賦值本次得延遲點擊 6 fn.apply(this); //執行fn,修正this指向問題 7 }, delay); 8 } 9 } 10 11 // onclick右邊的值必須是個函數,恰好throttle()調用後的返回值是return後的函數 12 document.querySelector('#button').onclick = throttle(function(){ 13 console.log('我點擊了') 14 },1000);
總結blog
節流函數就是執行第一次,指定時間後纔會執行第二次事件
防抖函數就是在指定時間內,只執行最後一次,缺點就是會被延遲執行
點擊按鈕發起請求時,特別要注意,防止用戶重複點擊。
具體用哪一個好,視狀況而定吧。