1. 防抖和节流函数是什么
JS的防抖函数和节流函数都是用于控制函数的执行频率，以提高性能和优化用户体验
防抖函数（Debounce）： 防抖函数的作用是当一个事件被频繁触发时，只执行一次事件处理函数。它通过设置一个定时器，在指定的时间间隔内不再有触发事件才会执行函数。如果在指定的时间间隔内再次触发了事件，则会重新计时，直到没有新的触发事件。 关键：延迟执行函数，直到一定时间内没有新的触发事件节流函数（Throttle）： 节流函数的作用是限制函数的执行频率，确保在指定的时间间隔内只执行一次事件处理函数。它通过设置一个标志位或者记录上次执行的时间，在指定的时间间隔内多次触发事件时，只执行一次函数。关键：限制函数的执行频率，确保在一定时间内只执行一次函数
应用场景：防抖适用于需要等待一段时间后执行一次函数的场景，如输入框监听change事件发送网络请求；节流函数适用于需要限制函数的执行频率的场景如页面滚动、拖拽操作、窗口调整大小等。两者都可以优化性能和提升用户体验，具体使用哪一个取决于实际需求。
2. 防抖（Debounce）函数
- 设置一个计时器变量，用于记录最后一次触发事件的时间。
- 在事件被触发时，首先清除之前设置的计时器。
- 然后重新设置一个新的计时器，在指定的时间间隔后执行函数。
- 如果在指定的时间间隔内再次触发了事件，则会重新计时。
function debounce(fn, delay) {
//定义定时器
let timer = null
const _debounce = function (...args) {
//取消上一次定时器
timer && clearTimeout(timer)
//延迟执行
timer = setTimeout(() => {
//绑定this,并传递event
fn.apply(this, args)
}, delay)
}
return _debounce
}
3. 节流
- 设置一个标志位或者记录上次执行函数的时间。
- 在事件触发时，首先判断标志位或者计算当前时间与上次执行时间的差值。
- 如果未达到时间间隔要求，则取消本次执行，并等待下次事件触发。
- 如果达到时间间隔要求，则执行事件处理函数，并更新标志位或者更新上次执行时间。
function throttle(fn, interval) {
//初始时间
let lastTime = 0
const _throttle = function (event) {
//出发时间
const nowTime = new Date().getTime()
//判断触发时间和初始时间是否相差 interval
if (nowTime - lastTime >= interval) {
fn.call(this, event);
//重置初始时间
lastTime = nowTime
}
}
return _throttle
}
