定义
-
节流: n 秒内只运行一次,若在 n 秒内重复触发,只有一次执行
-
防抖: n 秒后在执行该事件,若在 n 秒内被重复触发,则重新计时
代码实现
节流
完成节流可以使用时间戳与定时器的写法
使用时间戳写法,事件会立即执行,停止触发后没有办法再次执行
let time1 = null
$('.jl').mousemove(function () {
if (new Date() - time1 >= 1000) {
console.log('我是节流....');
time1 = new Date()
}
})
-
使用定时器写法,1000毫秒后第一次执行,第二次事件停止触发后依然会再一次执行
防抖
// 连续行为只触发一次:防抖
let time2 = null
$('.fd').mousemove(function () {
if (new Date() - time2 >= 1000) {
console.log('我是防抖...');
}
time2 = new Date()
})
二、区别
相同点:
-
都可以通过使用
setTimeout
实现 -
目的都是,降低回调执行频率。节省计算资源
不同点:
节流在间隔一段时间执行一次回调的场景有:
-
函数防抖,在一段连续操作结束后,处理回调,利用
clearTimeout
和setTimeout
实现。函数节流,在一段连续操作中,每一段时间只执行一次,频率较高的事件中使用来提高性能 -
函数防抖关注一定时间连续触发的事件,只在最后执行一次,而函数节流一段时间内只执行一次
三、应用场景
防抖在连续的事件,只需触发一次回调的场景有:
-
搜索框搜索输入。只需用户最后一次输入完,再发送请求
-
手机号、邮箱验证输入检测
-
滚动加载,加载更多或滚到底部监听
-
搜索框,搜索联想功能
-
窗口大小
resize
。只需窗口调整完成后,计算窗口大小。防止重复渲染。