防抖(debounce) 和 节流(throttling)

防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 在给DOM绑定事件时,有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll,窗口大小改变事件onresize,瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂,就会导致响应跟不上触发,出现页面卡顿,假死现象。 在实时检查输入时,如果我们绑定onkeyup事件发请求去服务端检查,用户输入过程中,事件的触发频率也会很高,会导致大量的请求发出,响应速度会大大跟不上触发。

针对此类快速连续触发和不可控的高频触发问题,debounce 和 throttling 给出了两种解决策略;

debounce,去抖动。策略是当事件被触发时,设定一个周期延迟执行动作,若期间又被触发,则重新设定周期,直到周期结束,执行动作。 这是debounce的基本思想,在后期又扩展了前缘debounce,即执行动作在前,然后设定周期,周期内有事件被触发,不执行动作,且周期重新设定。

延迟debounce,示意图:

前缘debounce, 示意图

 

debounce的特点是当事件快速连续不断触发时,动作只会执行一次。 延迟debounce,是在周期结束时执行,前缘debounce,是在周期开始时执行。但当触发有间断,且间断大于我们设定的时间间隔时,动作就会有多次执行。

debounce 的实现:

版本1:  周期内有新事件触发,清除旧定时器,重置新定时器;

  • 149
    点赞
  • 654
    收藏
    觉得还不错? 一键收藏
  • 21
    评论
防抖函数和节流函数都是用来限制函数的执行频率,防止短时间内多次触发导致性能问题。 防抖函数(Debounce)的作用是将多次连续触发的函数调用合并为一个函数调用。当事件触发后,设定一个定时器,在指定的时间间隔内如果事件再次触发,则重新计时,直到指定时间间隔内没有事件再次触发,才执行函数。 下面是一个使用防抖函数的例子: ```javascript function debounce(func, delay) { let timer = null; return function(...args) { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, delay); }; } // 使用防抖函数来限制按钮点击事件的频率 const button = document.querySelector('button'); button.addEventListener('click', debounce(() => { console.log('Button clicked'); }, 2000)); ``` 节流函数(Throttle)的作用是在一定时间间隔内只执行一次函数。当事件触发后,设定一个定时器,在指定的时间间隔内只能执行一次函数。 下面是一个使用节流函数的例子: ```javascript function throttle(func, delay) { let timer = null; let lastTime = 0; return function(...args) { const currentTime = new Date().getTime(); if (currentTime - lastTime > delay) { func.apply(this, args); lastTime = currentTime; } }; } // 使用节流函数来限制滚动事件的触发频率 window.addEventListener('scroll', throttle(() => { console.log('Scrolling'); }, 1000)); ``` 这样,在按钮点击事件或者滚动事件触发时,就可以控制其执行频率,避免频繁触发导致性能问题。
评论 21
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值