簡單的節流函式throttle
阿新 • • 發佈:2018-11-06
在實際專案中,總會遇到一些函式頻繁呼叫的情況,比如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是個高階函式,引數輸入是個函式【該頻繁呼叫的函式】以及觸發時間,第一次觸發有個只執行一次的方法,後面接著就是定時器觸發函式。節流函式的本質就是利用定時器的延遲進行函式觸發。
【完】
後來我才知道,他並不是我的花。只是我恰好途徑了他的盛放。