函数去抖、函数节流

函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发。

去抖（debounce）：

函数去抖就是对于一定时间段的连续的函数调用，只让其执行一次。连续事件触发结束后只触发一次。

应用场景：

每次resize/scroll 触发事件

文本输入的验证（连续输入文字后发送AJAX 请求进行验证，验证一次就好）

underscore封装了debounce方法，_debounce

_.debounce(fn, wait, boolean);

默认不传boolean代表false，如果传递了true，会忽略wait参数，会立即触发fn,这样对于连续的操作，也只会执行一次，就是在事件第一次触发的时候。

用法：

栗子1:

function print() {

console.log('hello world');

}

window.onscroll = _.debounce(print, 1000);

栗子2:

function print() {

console.log('hello world');

}

window.onscroll = _.debounce(print, 1000, true);

栗子3:Fn有参数需要传递

function print(a) {

console.log('The passed item is: ' +a);

}

var callback = _.debounce(print, 1000);

window.onscroll= function() {

var item ='zichi';

callback(item);

};

节流（throttle）：

函数节流就是间隔一定时间触发回调，即固定时间段间断地执行。

应用场景：

DOM 元素的拖拽功能实现（mousemove）

射击游戏的mousedown/keydown 事件（单位时间只能发射一颗子弹）

计算鼠标移动的距离（mousemove）

Canvas模拟画板功能（mousemove）

搜索联想（keyup）

监听滚动事件判断是否到页面底部自动加载更多。

栗子：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是throttle 的话，只要页面滚动就会间隔一段时间判断一次 。

underscore封装了throttle方法，_throttle

_.throttle(fn, wait, option);

Option不传，默认是{ leading: true ,trailing: true}

//不传的默认为true

Option{ leading: false,trailing: true}

Option{ leading: true,trailing: false}

不允许同时设置为false，下面这种是错的

Option{ leading: false,trailing: false}