防抖函数

[conan1992]

防抖

原理：你尽管触发事件，但是我一定在事件触发 n 秒后才执行，如果你在一个事件触发的 n 秒内又触发了这个事件，那我就以新的事件的时间为准，n 秒后才执行，总之，就是要等你触发完事件 n 秒内不再触发事件，才执行；

实现

function debounce(fn, timeout){
    timeout = timeout || 200;
    var timer = null;
    return function(){
        clearTimeout(timer);
        timer = setTimeout(fn, timeout)
    }
}

完善-this指向

function debounce(fn, timeout){
    timeout = timeout || 200;
    var timer = null;
    return function(){
        clearTimeout(timer);
        timer = setTimeout(fn.bind(this), timeout)
    }
}

完善-参数传递

function debounce(fn, timeout){
    timeout = timeout || 200;
    var timer = null;

    return function(){
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function(){
            fn.apply(context, args)
        }, timeout)
    }
}

需求--立即执行

事件触发后立刻执行函数，然后等到停止触发 n 秒后，才可以重新触发执行。

function debounce(fn, timeout, immediate){
    timeout = timeout || 200;
    var timer = null;
    return function(){
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        if(immediate){
            var callNow = !timer;
            if(callNow){
                fn.apply(context, args)
            }
            timer = setTimeout(function(){
                timer = null;
            }, timeout)
        }else{

            timer = setTimeout(function(){
                fn.apply(context, args)
            }, timeout)
        }

    }
} 

返回值

function debounce(fn, timeout, immediate){
    timeout = timeout || 200;
    var timer = null;
    var result;
    return function(){
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        if(immediate){
            var callNow = !timer;
            if(callNow){
                result = fn.apply(context, args)
            }
            timer = setTimeout(function(){
                timer = null;
            }, timeout)
        }else{

            timer = setTimeout(function(){
                fn.apply(context, args)
            }, timeout)
        }
        return result;
    }
} 

取消

function debounce(fn, timeout, immediate){
    timeout = timeout || 200;
    var timer = null;
    var result;
    var debounced =  function(){
        var context = this;
        var args = arguments;
        clearTimeout(timer);
        if(immediate){
            var callNow = !timer;
            if(callNow){
                result = fn.apply(context, args)
            }
            timer = setTimeout(function(){
                timer = null;
            }, timeout)
        }else{

            timer = setTimeout(function(){
                fn.apply(context, args)
            }, timeout)
        }
        return result;
    }
    debounced.cancel = function(){
        clearTimeout(timer);
        timer = null;
    }
}  

• 参考 JavaScript专题之跟着underscore学防抖