参考
- 《JavaScript设计模式与开发实践》第三章闭包与高阶函数
- http://www.jb51.net/article/105601.htm
为什么需要函数节流
函数被频繁调用,不是由用户直接控制的,且造成大的性能问题。
1. window.resize事件
2. mousemove事件
3. 上传进度
实现原理
通过逻辑限制1秒执行n次或者x毫秒内只能执行一次,具体通过高阶函数和闭包实现函数节流逻辑和具体函数执行的分离。
实例代码
function(fn,interval){
var _self = fn
var timer
var first = true
return function(){
var _me = this
var args = arguments
if(first){//第一次执行
var ret = _self.apply(_me,args)
return first = false
}
if(timer){//如果定时器还在,说明前一次延迟执行还没有完成
return false
}
timer = setTimeout(function(){ //延迟一段时间执行
clearTimeout(timer)
timer = null
_self.apply(_me,args)
},interval || 500)
}
}
自己实现的版本
//throttle 函数节流要点是,声明一个变量当标志位,记录当前代码是否在执行。
function throttle(fn,interval){
//是否执行标识
var isCallFn = false;
return function(){
if(!isCallFn){
isCallFn = true;
var result = fn.apply(this,arguments);
setTimeout(function(){
isCallFn = false;
},interval);
return true;
}else{
return false;
}
}
}
//debounce 函数防抖要点是,需要一个setTimeout来辅助实现。延迟执行需要跑的代码。
function debounce(fn,interval){
var timerId = null;
return function(){
var _this = this;
if(!timerId){//有定时执行就清除,用最新的再延时执行
clearTimeout(timerId)
timerId=null;
}
timerId = setTimeout(function(){
clearTimeout(timerId)
timerId=null;
fn.apply(_this,arguments);
},interval);
}
}