什么事防抖和节流，有什么区别，如何实现

防抖和节流，本质上是优化高频率执行代码的一种手段，比如：resize、scroll、keypress、mousemove这些事件在触发的时候，会不断调用绑定在事件上的回调函数，这样极大浪费资源，降低前端性能。

为了优化体验，需要对这类事件进行调用次数的限制，所以我们采取了防抖和节流的手段来减少调用频率。

节流：在n秒内重复发生的事件，只有一次是生效的
防抖：在n秒后再执行该事件。

节流

完成节流可以使用时间戳与定时器的写法，使用时间戳的写法，事件会立即执行，停止触发后没有办法再次执行：

function throttled1(fn, delay = 500) {let oldtime = Date.now()return function (...args) {let newtime = Date.now()if (newtime - oldtime >= delay) {fn.apply(null, args)oldtime = Date.now()}}
}

使用定时器的写法，delay毫秒后第一次执行：

function throttled2(fn, delay = 500) {let timer = nullreturn function (...args) {if (!timer) {timer = setTimeout(() => {fn.apply(this, args)timer = null}, delay);}}
}

两种写法的结合后：

function throttled(fn, delay) {let timer = nulllet starttime = Date.now()return function () {let curTime = Date.now() // let remaining = delay - (curTime - starttime) // let context = thislet args = argumentsclearTimeout(timer)if (remaining <= 0) {fn.apply(context, args)starttime = Date.now()} else {timer = setTimeout(fn, remaining);}}
}

防抖

简单的封装：

function debounce(func, wait) {let timeout;return function () {let context = this; // thislet args = arguments; // eventclearTimeout(timeout)timeout = setTimeout(function () {func.apply(context, args)}, wait);}
}

防抖和节流的相同点：

• 都可以使用setTimeout实现
• 目的都是降低回调函数的执行频率，节省计算资源

不同的是：

• 函数防抖，在连续操作结束后，处理回调，利用clearTimeout和setTimeout实现；函数节流是在一段时间只执行一次，
• 防抖关注的是一段时间内频繁触发的事件，只在最后执行一次；节流值关注的事一段时间内执行一次。

应用场景

防抖的使用场景有：

• 搜索框输入，只需要用户最后一次输入完，再做处理
• 手机号、邮箱验证输入检测
• 窗口大小resize，只需窗口调整完成后，计算窗口的大小，防止重复渲染

节流的应用场景有：

• 滚动加载，加载更多或者滚动到底部监听
• 搜索框，搜索关联功能