在一些业务场景中我们可能会用到window.onresize事件或者mousemove等监控类型事件,当用户做出相关操作的时候,会平凡触发相应的函数,有可能每秒会触发几十甚至上百次,如果函数中有一些DOM操作,就会导致浏览器卡顿等现象,很多时候我们根本不需要执行这么多次,这时我们就需要用到函数节流把多余的执行函数请求给过滤掉
var throttle = function(fn,time){ var self = fn, timer, firstTime = true; return function(){ var args = arguments, _self = this; if(firstTime){ //第一次调用的时候不需要过滤 self.apply(_self,args); return firstTime = false; }; if(timer){ return false; }; timer = srtTimeout(function(){ clearTimeout(timer); timer = null; self.apply(_self,args); },time || 500); }; };
利用延迟和闭包将多余的函数执行请求给过滤掉
window.onresize = throttle(function(){ //函数逻辑 },300)