一、作用

【throttle】

保证响应函数，在一定时间内，最多只触发一次。

在这“一定时间”内，响应第一次触发动作。

【debounce】

保证响应函数，在连续的动作结束后，再触发。

仅仅响应最后一次触发动作。

二、实现

【注：描述说明】

action 是连续动作期望触发的响应函数。如：连续 onClick 期望触发的 clickHandler。

响应，即执行 action 函数。

触发动作，即类似 click 的用户连续操作。

【throttle】

var throttle = function(delay, action){

    var last = 0;

    return function(){

        var curr = +new Date();

        if(curr - last > delay){

            action.apply(this, arguments);

            last = curr;            

        }

    }

}

在上一次响应触发动作后的 delay 毫秒内，不再响应。

上一次响应超过 delay 毫秒后，再有触发动作发出，正常响应，并重新倒计时 delay 毫秒，期间不再响应。

【适用场景】

比如 H5 列表页的上拉加载，假如我们判断，onScroll 时，滑动元素距离达到底部剩余距离小于50px，发出请求下一页数据的请求。

如果不使用 throttle，小于 50px 开始，由于用户在持续做 scroll 动作，会连续发送 n 条请求。

使用 throttle 逻辑处理，确保刚刚到达 50px 距离时，发出拉取下一页的请求。请求后，delay 毫秒内，不再重复发出拉取请求。

【debounce】

var debounce = function(idle, action){

    var timer;

    return function(){

        var ctx = this,

              args = arguments;

        clearTimeout(timer);

        timer = setTimeout(function(){

            action.apply(ctx, args);

        },idle);

    }

}

在连续的触发动作停止后，等待 idle 毫秒，再执行响应。

如果连续的触发动作不停止，则一直不执行响应。

【适用场景】

比如列表页翻页，快速、连续点击1、2、3、4页，防止连续4次响应click，使用 debounce 逻辑处理，确保只执行第4页的翻页请求。

三、使用

使用 throttle/debounce 包装响应函数 action 后，使用 throttleAction/debounceAction：

var throttleAction = throttle(1000, action);

var debounceAction = debounce(1000, action);

作为 click 等动作的响应函数即可。