高阶函数 debounce 和 throttle

/**
* 空闲控制 返回函数连续调用时，空闲时间必须大于或等于 idle，action 才会执行
* @param idle   {number}    空闲时间，单位毫秒
* @param action {function}  请求关联函数，实际应用需要调用的函数
* @param tail?  {bool}      是否在尾部执行
* @return {function}	返回客户调用函数
*/
debounce(idle,action,tail?)

　　

/**
* 频率控制 返回函数连续调用时，action 执行频率限定为 次 / delay
* @param delay  {number}    延迟时间，单位毫秒
* @param action {function}  请求关联函数，实际应用需要调用的函数
* @param tail?  {bool}      是否在尾部用定时器补齐调用
* @return {function}	返回客户调用函数
*/
throttle(delay,action,tail?)

　　

使用样例：

// ajaxQuery 将在停止输入 250 毫秒后执行
$('#autocomplete').addEventListener('keyup',debounce(250,function() {
    ajaxQuery(this.value,renderUI);
},true))
// 当窗口大小改变时，以 50 毫秒一次的频率为单位执行定位函数 position
window.addEventListener('resize',throttle(50,position,true) );

　　更多：

只要牵涉到连续事件或频率控制相关的应用都可以考虑到这两个函数，比如：

• 游戏射击，keydown 事件
• 文本输入、自动完成，keyup 事件
• 鼠标移动，mousemove 事件
• DOM 元素动态定位，window对象的resize和scroll 事件

前两者 debounce 和 throttle 都可以按需使用；后两者肯定是用 throttle 了。