debounce 防抖
应用场景
- 搜索框搜索输入，只需用户最后一次输入完再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小 resize，只需窗口调整完成后，计算窗口大小，防止重复渲染
言外之意就是防止事件一直触发执行；
<body>
<div class="box"></div>
<script>
// 获取 盒子
var box = document.querySelector('.box')
// 防抖
function debounce(fn, wait) {
//定义一个定时器
var timer = null
return function () {
if (timer !== null) {
//清除这个定时器
clearTimeout(timer)
}
timer = setTimeout(fn, wait)
}
}
// 滚动事件
box.addEventListener('scroll', debounce(scTop, 1000))
// 处理函数
function scTop() {
console.log(box.scrollTop)
}
</script>
</body>
throttle 节流：
应用场景
1.滚动加载，加载更多或滚到底部监听
2.搜索框，搜索联想功能
言外之意就是防止事件一直触发执行；
指的是当持续触发事件时，每隔一定的时间，只执行一次函数，我自己理解为匀速执行
<script>
// 获取 盒子
var box = document.querySelector('.box')
// 节流
function throttle(func, delay) {
// 定义计时器
var timer = null
return function () {
var args = arguments
if (!timer) {
timer = setTimeout(function () {
func.apply(this, args)
timer = null
}, delay)
}
}
}
// 滚动事件
box.addEventListener('scroll', throttle(scTop, 1000))
// 处理函数
function scTop() {
console.log(box.scrollTop)
}
</script>
防抖和节流相同点：
- 都可以通过 setTimeout 实现
- 都是降低执行频率，节省计算资源
防抖和节流不同点：
debounce 防抖是在一段连续操作结束后，执行函数，利用 setTimeout 和 clearTimeout 实现，throttle 节流是在一段连续操作中，每隔一段时间只执行一次，频率较高的事件中使用，用来提高性能。
debounce 防抖关注一定时间连续触发的事件，只在最后执行一次，而 throttle 节流一段时间内只执行一次