函数防抖(debounce)
防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假设我们设置了一个等待3秒的函数，在这3秒内如果遇到函数调用请求就重新计时3秒，直至新的3秒内没有函数调用请求，此时执行函数，不然就依次类推重新计时。
原理与实现
实现原理就是利用定时器，函数第一次执行时设定一个定时器，之后调用时发现已经设定过定时器就清空之前的定时器，并重新设定一个新的定时器，如果存在没有被清空的定时器，当定时器结束后触发函数执行。
// func 是用户传入需要防抖的函数
// wait 是等待时间
const debounce = ( func, wait = 100 ) => {
// 设置一个定时器 （id)
let timer = 0
// 这里放回的函数是每次用户实际调用的防抖函数
// 如果已经设置过定时器就清空上一次的定时器
// 开始一个新的定时器，延迟执行用户传入的方法
return function(...args) {
if(timer) clearTimeout(timer)
timer = setTimeout(() => {
func.apply(this, args)
}, wait )
}
}
函数节流(throttle)
规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。即每隔一段时间后执行一次，也就是降低频率，将高频操作优化成低频操作。通常使用场景：滚动条事件 或者 resize 事件，通常每隔 100~500ms 执行一次即可
// func 是用户传入需要防抖的函数
// wait 是等待时间
const throttle = (func, wait = 100) => {
// 上一次执行函数的时间
let lastTime = 0
return (...args) => {
let now = new Date().getTime()
// 将当前时间和上一次执行函数时间对比
// 如果差值大于设置的时间就执行函数
if(now - lastTime > await) {
func.apply(this, args)
lastTime = now
}
}
}
let i = 1
window.addEventListener('scroll', throttle(() => {
console.log('图片懒加载')
console.log(i)
i += 1
}, 350))
总结
函数防抖和函数节流都是防止某一时间频繁触发，但是原理却不同。函数防抖是某一段时间内只执行一次，而函数节流是间隔时间执行。
debounce
search搜索联想，用户在不断输入值时，用防抖来节约请求资源。window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其触发一次
throttle
鼠标不断点击触发，mousedown(单位时间内只触发一次)监听滚动事件，比如是否滑倒底部自动加载更多，用throttle来判断
