簡單的節流函數throttle
阿新 • • 發佈:2018-11-06
als 進度 this 限制 解決方案 style 頻率 定時器 很大的
在實際項目中,總會遇到一些函數頻繁調用的情況,比如window.resize,mouseover,上傳進度類似的觸發頻率比較高的函數,造成很大的性能損耗,這裏可以使用節流函數來進行性能優化,主要是限制函數被頻繁調用的解決方案:
let throttle = function(fn,interval){ let __self = fn,timer,firstTime = true; return function(){ var args = arguments,__me = this; if(firstTime){ __self.apply(__me,args);return firstTime = false; } if(timer){ return false; } //先執行了一次,firstTime是false,然後500毫秒之後利用定時器再次執行。 timer = setTimeout(function(){ clearTimeout(timer); timer = null; __self.apply(__me,args); },interval||500) } } window.onresize= throttle(function(){ console.log(1) },500)
此函數可以觸類旁通,throttle是個高階函數,參數輸入是個函數【該頻繁調用的函數】以及觸發時間,第一次觸發有個只執行一次的方法,後面接著就是定時器觸發函數。節流函數的本質就是利用定時器的延遲進行函數觸發。
【完】
後來我才知道,他並不是我的花。只是我恰好途徑了他的盛放。
簡單的節流函數throttle