函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发。
去抖(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}