函数防抖
函数防抖，debounce，将多个信号合并为一个信号。
用户触发事件，将在5秒后开始执行程序，如果用户在5秒内又触发事件，就需要继续重新计时5秒，然后再执行。
代码实现：
function debounce(fn, delayTime){
let timer
return function(){
clearTimeout(timer)
let context = this
let args = arguments
timer = setTimeout(()=>{
fn.apply(context, args)
},delayTime)
}
}
var a = debounce(function(e){console.log('延迟了')},
1000)
document.querySelector('input').addEventListener('input',a)
应用场景
- 每次resize/scroll 触发统计事件
- 文本输入的验证（连续输入文字后发送AJAX请求进行验证）
函数节流
函数节流，throttle
用户触发事件，开始计时5秒，每5秒执行一次，如果没有触发，就不执行。
function throttle (fn, time) {
let timeout
let start = new Date
let time = time || 200
return function(){
let context = this
let args = arguments
let current = new Date() - 0
clearTimeout(timeout)
if(current - start >= time){
fn.apply(context, args)
start = current
}else{
timeout = setTimeout(()=>{
fn.apply(context, args)
},time)
}
}
}
应用场景
- DOM元素的拖拽功能（mousemove）
- 计算鼠标的移动距离（mousemove）
- canvas模拟画板功能（mousemove）
- 搜索联想（keyup）
- 监听滚动事件判断时候到达页面底部，自动加载更多（给scroll家debounce，只有用户停止滚动，才会是否到了底部；而throttle，只要页面滚动就会间隔一段时间判断一次）
