函数节流

[willson-wang]

关于节流的实现，有两种主流的实现方式，一种是使用时间戳，一种是设置定时器，第一种事件会立刻执行，第二种事件会在 n 秒后第一次执行，第一种事件停止触发后没有办法再执行事件，第二种事件停止触发后依然会再执行一次事件

<div class="box"></div>

var box = document.getElementsByClassName("box")[0];
var WAIT_TIME = 500;

var throttle1 = function (func, time){
    var previous = 0,
        _this,
        args;
    return function (){
        var now = +new Date(); //使用时间搓
        _this = this;
        args = arguments;

        if(now - previous > time){
            func.apply(_this, args);
            previous = now;
        }
    }
}

var throttle2 = function (func, time){
    var _this,
        timeout,
        args;
    return function (){
        _this = this;
        args = arguments;
        if(!timeout){
            timeout = setTimeout(function (){
                func.apply(_this, args);
                timeout = null;
            }, time);
        }

    }
}

var throttle3 = function (func, time){//时间戳与定时器的结合
    var previous = 0,
        _this,
        timeout,
        args; 

    var later = function (){
        previous = +new Date();
        timeout = null;
        func.apply(_this, args);
    }

    return function (){
        var now = +new Date();  
        var remaining = time - (now - previous); //下次执行func剩余的时间

        _this = this;
        args = arguments;

        if(remaining < 0 || remaining > time){
            if(timeout){
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(_this, args);
        }else if(!timeout) {
            timeout = setTimeout(later, remaining);
        }
    }

}

var throttle4 = function (func, time, options){//时间戳与定时器的结合
    var previous = 0,
        _this,
        timeout,
        args; 

    if (!options) options = {};

    var later = function (){
        previous = options.leading === false ? 0 : new Date().getTime();
        timeout = null;
        func.apply(_this, args);
        if (!timeout) _this = args = null;
    }

    return function (){
        var now = +new Date();  
        if(!previous && options.leading === false) previous = now;
        var remaining = time - (now - previous); //下次执行func剩余的时间

        _this = this;
        args = arguments;

        if(remaining < 0 || remaining > time){
            if(timeout){
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            func.apply(_this, args);
            if (!timeout) _this = args = null;
        }else if(!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
    }

}

var getUserAction = function (){
    console.log(this);
    console.log(arguments);
}

// box.onmousemove = throttle1(getUserAction, 1000);
// box.onmousemove = throttle2(getUserAction, 1000);
// box.onmousemove = throttle3(getUserAction, 1000);
// box.onmousemove = throttle4(getUserAction, 1000,{
// leading：false 表示禁用第一次执行  trailing: false 表示禁用停止触发的回调
// });

box.onmousemove = throttle4(getUserAction, 1000,{
    trailing: false
});