目录
♡ ‧₊˚ 定义 ‧₊˚ ♡
防抖(debounce):当我们持续触发一个事件时,事件处理程序不会执行,只有当我们在设置的时间间隔里没有触发事件时,事件处理程序才会执行,若在这个时间间隔里被重复触发则重新开始计算。
节流(throttle):无论事件触发得多么频繁,在规定的时间间隔内只执行一次事件处理程序。
目的:都是为了降低回调执行频率。节省计算资源
♡ ‧₊˚ 实现 ‧₊˚ ♡
防抖
代码实现如下:
<body>
<input type="text" id="shuru">
<button onclick="btnClick()">此处防抖</button>
<script>
// 防抖
// 获取事件
var shuru = document.getElementById('shuru')
// 创建一个定时器
var timeID = null
// 绑定事件
shuru.oninput = function(){
// 每当用户点击/输入时就将前一个定时器删除
clearTimeout(timeID)
// 然后创建一个新的定时器
// 如果用户在这个时间间隔内在此操作的话
// 函数将不会被执行
timeID = setTimeout(() => {
console.log(`你输入的值是${this.value}`);
},1000)
}
// 执行后我们发现:当我们在输入框持续输入内容时控制台
// 不会打印东西,当我们在设置的时间间隔一秒内没有进行输入操作的话
// 控制台会将我们输入的值打印出来
</script>
</body>
若不加入防抖,则我们每次在输入框里输入一个字符,控制台都会打印依次“你输入的值是…” ,而加入了防抖之后,若我每次在输入框中输入三个字符便停顿一次,那么在我们设置的这个时间间隔一秒之后,这个函数才会被执行一次,相应的语句被打印一次。
节流
代码实现如下:
<body>
<input type="text" id="shuru">
<button onclick="btnClick()">此处节流</button>
<script>
var lastTime = null
function btnClick(){
// 获取当前时间
var currentTime = Date.now()
// 从上一次到现在,还剩下多少多余时间
if(currentTime - lastTime >= 3000){
console.log('被点击了');
// 将当前时间赋值给lastTime继续记录时间间隔
lastTime = currentTime
}
}
</script>
</body>
无论我们点击得多么频繁,语句也只会三秒再打印一次。
♡ ‧₊˚ 应用 ‧₊˚ ♡
防抖在连续的事件,只需触发一次回调的场景有:
- 搜索框搜索输入。只需用户最后一次输入完,再发送请求
- 手机号、邮箱验证输入检测
- 窗口大小
resize
。只需窗口调整完成后,计算窗口大小。防止重复渲染。
节流在间隔一段时间执行一次回调的场景有:
- 滚动加载,加载更多或滚到底部监听
- 搜索框,搜索联想功能