A5sh.com - 全球挚爱极客社区

标题: 什么是防抖和节流？ [打印本页]

---

作者: simonzhd    时间: 2023-5-4 21:19
标题: 什么是防抖和节流？

提示

防抖和节流一般在做用户体验优化的时候会用上。

什么是防抖？

是指一个事件在同一时间内被多次频繁触发后，最终只会执行一次。多次触发后会重新计算时间，只生效最后一次触发。

基础案例

可通过定时器来实现

1. var timer = 0
   
2. 
   
3. function click() {
   
4.     clearTimeout(timer)
   
5. 
   
6.     timer = setTimeout(function () {
   
7.         console.log('鼠标单击触发')
   
8.     }, 1000)
   
9. }
   
10. 
    
11. document.addEventListener('click', click)

复制代码

应用场景

提交按钮：所有提交后要调用接口的按钮都可以添加防抖，避免多次调用重复接口。

浏览器窗口缩放：在一些特定时候需要监听浏览器窗口变动，变动后重新渲染页面，使用防抖可以防止重复渲染。

什么是节流？

在规定时间内，该事件只会被触发第一次。后续触发的事件将会被忽略，直到计时结束。

基础案例

可通过定时器和锁定标识实现。

1. var isLock = false
   
2. 
   
3. function click() {
   
4.     if (isLock) return
   
5. 
   
6.     isLock = true
   
7. 
   
8.     setTimeout(function () {
   
9.         console.log('鼠标单击触发')
   
10.         isLock = false
    
11.     }, 1000)
    
12. }
    
13. 
    
14. document.addEventListener('click', click)

复制代码

应用场景

搜索框联动查询：用户在搜索框输入内容值，可定时查询接口返回展示的内容。

获取验证码功能：获取手机验证码后，在规定时间内无法在进行获取。

---

欢迎光临 A5sh.com - 全球挚爱极客社区 (https://a5sh.com/)

Powered by Discuz! X3.4