javascript 函数节流

参考

• 《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);
    }
}