防抖与节流函数
大约 2 分钟约 639 字
防抖与节流函数
防抖和节流的作用都是在高频事件中防止函数被多次调用，是一种性能优化的方案。
区别在于，防抖函数只会在高频事件结束后 n 毫秒调用一次函数，节流函数会在高频事件触发过程当中每隔 n 毫秒调用一次函数。
防抖函数
触发高频事件后一段时间（wait）只会执行一次函数，如果指定时间（wait）内高频事件再次被触发，则重新计算时间。
封装
// 防抖函数
function debounce(func, wait) {
let timeout = null
return function () {
let context = this
let args = arguments
if (timeout) clearTimeout(timeout)
timeout = setTimeout(() => {
func.apply(context, args)
}, wait)
}
}
节流函数
规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效
封装
// 节流函数
function throttle(func, wait) {
let timeout = null
return function () {
let context = this
let args = arguments
if (!timeout) {
timeout = setTimeout(() => {
timeout = null
func.apply(context, args)
}, wait)
}
}
}
应用场景
常见的应用场景都是使用高频事件来调用函数的过程当中，比如应用于 window 对象的 resize、scroll 事件，拖拽时的 mousemove 事件，文字输入、自动完成的 keyup 事件。
防抖应用场景
- scroll 事件滚动触发事件
- 搜索框输入查询，如果用户一直在输入中，没有必要不停地调用去请求服务端接口，等用户停止输入的时候，再调用，设置一个合适的时间间隔，有效减轻服务端压力。
- 表单验证
- 按钮提交事件。
- 浏览器窗口缩放，resize 事件(如窗口停止改变大小之后重新计算布局)等。
节流的应用场景
- DOM 元素的拖拽功能实现（mousemove）
- 搜索联想（keyup）
- 计算鼠标移动的距离（mousemove）
- Canvas 模拟画板功能（mousemove）
- 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
- 监听滚动事件判断是否到页面底部自动加载更多
示例
<body>
<p
class="codepen"
data-height="600"
data-theme-id="light"
data-default-tab="result"
data-user="xugaoyi"
data-slug-hash="QWbgLMP"
style="height: 600px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;"
data-pen-title="防抖与节流函数"
>
<span
>See the Pen
<a href="https://codepen.io/xugaoyi/pen/QWbgLMP"> 防抖与节流函数</a> by
frontchen (<a href="https://codepen.io/xugaoyi">@xugaoyi</a>) on
<a href="https://codepen.io">CodePen</a>.</span
>
</p>
<body>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
</body>
</body>