[分享] 浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异

function log( event ) { console.log( $(window).scrollTop(), event.timeStamp ); }; // 控制台记录窗口滚动事件，触发频率比你想象的要快 $(window).scroll( log ); // 控制台记录窗口滚动事件，每250ms最多触发一次 $(window).scroll( _.throttle( log, 250 ) ); 

function ajax_lookup( event ) { // 对输入的内容$(this).val()执行 Ajax 查询 }; // 字符输入的频率比你预想的要快，Ajax 请求来不及回复。 $('input:text').keyup( ajax_lookup ); // 当用户停顿250毫秒以后才开始查找 $('input:text').keyup( _.debounce( ajax_lookup. 250 ) ); 

/**  * 频率控制 返回函数连续调用时，func 执行频率限定为 次 / wait  *   * @param {function} func 传入函数  * @param {number} wait 表示时间窗口的间隔  * @param {object} options 如果想忽略开始边界上的调用，传入{leading: false}。  * 如果想忽略结尾边界上的调用，传入{trailing: false}  * @return {function} 返回客户调用函数   */ _.throttle = function(func, wait, options) { var context, args, result; var timeout = null; // 上次执行时间点 var previous = 0; if (!options) options = {}; // 延迟执行函数 var later = function() { // 若设定了开始边界不执行选项，上次执行时间始终为0 previous = options.leading === false ? 0 : _.now(); timeout = null; result = func.apply(context, args); if (!timeout) context = args = null; }; return function() { var now = _.now(); // 首次执行时，如果设定了开始边界不执行选项，将上次执行时间设定为当前时间。 if (!previous && options.leading === false) previous = now; // 延迟执行时间间隔 var remaining = wait - (now - previous); context = this; args = arguments; // 延迟时间间隔remaining小于等于0，表示上次执行至此所间隔时间已经超过一个时间窗口 // remaining大于时间窗口wait，表示客户端系统时间被调整过 if (remaining <= 0 || remaining > wait) { 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; }; }; 

/**  * 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 wait，func 才会执行  *  * @param {function} func 传入函数  * @param {number} wait 表示时间窗口的间隔  * @param {boolean} immediate 设置为ture时，调用触发于开始边界而不是结束边界  * @return {function} 返回客户调用函数  */ _.debounce = function(func, wait, immediate) { var timeout, args, context, timestamp, result; var later = function() { // 据上一次触发时间间隔 var last = _.now() - timestamp; // 上次被包装函数被调用时间间隔last小于设定时间间隔wait if (last < wait && last > 0) { timeout = setTimeout(later, wait - last); } else { timeout = null; // 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用 if (!immediate) { result = func.apply(context, args); if (!timeout) context = args = null; } } }; return function() { context = this; args = arguments; timestamp = _.now(); var callNow = immediate && !timeout; // 如果延时不存在，重新设定延时 if (!timeout) timeout = setTimeout(later, wait); if (callNow) { result = func.apply(context, args); context = args = null; } return result; }; };