区别
- 函数节流是指一定时间内 js 方法只跑一次。比如人的眨眼睛,就是一定时 间内眨一次。这是函数节流最形象的解释。函数防抖是指频繁触发的情况
下,只有足够的空闲时间,才执行代码一次。比如生活中的坐公交,就是一 定时间内,如果有人陆续刷卡上车,司机就不会开车。只有别人没刷卡了,
司机才开车。 - 函数防抖: 防抖就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
let box = document.getElementById('box');
let timer = 0 box.onclick = function () {
clearTimeout(timer)
timer = setTimeout(() => {
console.log(1)
}, 1000)}
应用场景
- 函数防抖的应用场景,最常见的就是用户注册时候的手机号码验证和邮箱验 证了。只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正
确,再弹出提示语。 - 函数节流:节流就是指连续触发事件但是在 n 秒中只执行一次函数。
let box = document.getElementById('box');
let timer = 0;
box.onclick = function () {
if (!timer) { timer = setTimeout(() => {
timer = 0;
console.log(1)
}, 1000) }}
- 函数节流应用的实际场景,多数在监听页面元素滚动事件的时候会用到。因 为滚动事件,是一个高频触发的事件