防抖
定义：频繁输入、频繁操作的时候，在最后才触发事件处理函数 。
应用场景：
1、input框搜索，监听value值的变化，只要值变化就触发搜索方法。使用防抖函数，在用户输入完成后，再触发搜索方法。
2、window的resize事件，只要浏览器窗口大小发生变化，就会触发。使用防抖函数，让其只在最后变化时触发一次。
实现思路：
步骤1：事件触发时，创建定时器timer，在一定时间后执行该定时器，定时器中对事件进行处理并清除当前定时器。
步骤2：如果事件在定时器有效时间内再次触发，则清除当前定时器，并再次执行步骤1。
code：
function debounce(fn, delay = 500) {
let timer = null
return function () {
if (timer) clearTimeout(timer)
timer = setTimeout(() => {
// 1.修复this指向，让fn中的this指向return函数中的this；return函数中的this指向调用他的对象，比如input；
// 注意：如果fn使用了箭头函数写法，this指向父级的this - window
// 2.传递参数
fn.apply(this, arguments)
timer = null
}, delay)
}
}
let input = document.getElementsByTagName("input")[0]
input.addEventListener("keyup", debounce(function () {
console.log(this, "此处this指向input")
// 事件处理函数...
}), 600)
input.addEventListener("keyup", debounce(() => {
console.log(this, "此处this指向父级的this - window")
// 事件处理函数...
}, 600))
节流
定义：频繁输入、频繁操作的时候，保持一定频率连续触发。
应用场景：
1、button的click事件，使用节流函数，单位时间内只触发一次。
2、window的scroll事件，只要浏览器发生滚动，就会触发。使用节流函数，单位时间内只触发一次，比如是否滑到底部自动加载更多。
3、元素的拖拽事件，使用节流函数，单位时间内只触发一次。
实现思路：
步骤1：事件触发时，创建定时器timer，在一定时间后执行该定时器，定时器中对事件进行处理并清除当前定时器。
步骤2：如果事件在定时器有效时间内再次触发，则返回不做任何处理。
code：
function throttle(fn, delay = 100) {
let timer = null
return function () {
if(timer) return
timer = setTimeout(() => {
// 需要将参数e通过arguments传递给fn函数，参数e默认是传给throttle函数
fn.apply(this, arguments)
timer = null
}, delay)
}
}
div.addEventListener("drag", throttle(function (e) {
// 事件处理函数...
console.log(e.offsetX, e.offsetY)
}, 200))
防抖和节流的比较
相同点：
目的都是进行性能优化，减少操作高频触发
不同点：
防抖是触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。适用于可以多次触发但触发只生效最后一次的场景。
节流是高频事件触发，但在n秒内只会执行一次，如果n秒内触发多次函数，只有一次生效，节流会稀释函数的执行频率。