• debounce(func, wait, immediate)：创建并返回函数的防反跳版本，将延迟函数的执行（真正的执行）在函数最后一次调用时刻的wait毫秒之后，对于必须在一些输入（多是一些用户操作）停止之后再执行的行为有帮助。将一个连续的调用归为一个！

• throttle(func, wait, options)：创建并返回一个像节流阀一样的函数，当重复调用函数的时候，最多每隔指定的wait毫秒调用一次该函数； 不允许方法在每wait ms间执行超过一次！

 

debounce使用场景：

第一次触发后，进行倒计wait毫秒，如果倒计时过程中有其他触发，则重置倒计时；否则执行fn。用它来丢弃一些重复的密集操作、活动，直到流量减慢。例如：

• 对用户输入的验证，不在输入过程中就处理，停止输入后进行验证足以；
• 提交ajax时，不希望1s中内大量的请求被重复发送。

 

throttle使用场景

第一次触发后先执行fn（当然可以通过{leading: false}来取消），然后wait ms后再次执行，在单位wait毫秒内的所有重复触发都被抛弃。即如果有连续不断的触发，每wait ms执行fn一次。与debounce相同的用例，但是你想保证在一定间隔必须执行的回调函数。例如：

• 对用户输入的验证，不想停止输入再进行验证，而是每n秒进行验证；
• 对于鼠标滚动、window.resize进行节流控制。

// 执行1次(最后一次点击1000ms后)     btnDom.addEventListener('click', debounce(clickBtn, 1000)); // 执行3次(点击立即执行一次、1000ms后执行一次，2000ms后执行一次) btnDom.addEventListener('click', throttle(clickBtn, 1000)); // 错误 $(window).on('scroll', function() { debounce(doSomething, 300); }); // 正确 $(window).on('scroll', debounce(doSomething, 200)); /** * 防反跳。func函数在最后一次调用时刻的wait毫秒之后执行！ * @param func 执行函数 * @param wait 时间间隔 * @param immediate 为true，debounce会在wai 时间间隔的开始调用这个函数 * @returns {Function} */function debounce(func, wait, immediate) {    var timeout, args, context, timestamp, result;    var later = function() {        var last = new Date().getTime() - timestamp; // timestamp会实时更新        if (last < wait && last >= 0) {            timeout = setTimeout(later, wait - last);        } else {            timeout = null;            if (!immediate) {                result = func.apply(context, args);                if (!timeout) context = args = null;            }        }    };    return function() {        context = this;        args = arguments;        timestamp = new Date().getTime();        var callNow = immediate && !timeout;        if (!timeout) {            timeout = setTimeout(later, wait);        }        if (callNow) {            result = func.apply(context, args);            context = args = null;        }        return result;    };}/** * 创建并返回一个像节流阀一样的函数，当重复调用函数的时候，最多每隔 wait毫秒调用一次该函数 * @param func 执行函数 * @param wait 时间间隔 * @param options 如果你想禁用第一次首先执行的话，传递{leading: false}， *                如果你想禁用最后一次执行的话，传递{trailing: false} * @returns {Function} */function throttle(func, wait, options) {    var context, args, result;    var timeout = null;    var previous = 0;    if (!options) options = {};    var later = function() {        previous = options.leading === false ? 0 : new Date().getTime();        timeout = null;        result = func.apply(context, args);        if (!timeout) context = args = null;    };    return function() {        var now = new Date().getTime();        if (!previous && options.leading === false) previous = now;        var remaining = wait - (now - previous);        context = this;        args = arguments;        if (remaining <= 0 || remaining > wait) {            if (timeout) {                clearTimeout(timeout);                timeout = null;            }            previous = now;            result = func.apply(context, args);            if (!timeout) context = args = null;        } else if (!timeout && options.trailing !== false) {            timeout = setTimeout(later, remaining);        }        return result;    };}