如何理解JS事件的防抖与节流?

开发 前端
在平时的编码过程中,当绐浏览器注册一个时间,经常会遇到一些执行次数非常频繁的事件,如scroll,resize等,事件频繁的执行会导致浏览器进行大量的计算而引发页面卡顿假死的情况,为些我们需要通过一些手段来解决这个问题,所以就有了防抖和节流这两个技术。

本文转载自微信公众号「新钛云服」,作者方章和。转载本文请联系新钛云服公众号。

在平时的编码过程中,当绐浏览器注册一个时间,经常会遇到一些执行次数非常频繁的事件,如scroll,resize等,事件频繁的执行会导致浏览器进行大量的计算而引发页面卡顿假死的情况,为些我们需要通过一些手段来解决这个问题,所以就有了防抖和节流这两个技术。

事件节流 throttle

是指在某段时间内,不管你触发了多少次回调事件,我都只认第一次,并在计时结束时给予响应,至于后面你再触发多少次回调我都不会予以回应。代码实现如下:

  1. // fn执行的函数, interval是时间间隔的阈值, 意为多久后执行,单位毫秒 
  2. function throttle(fn, interval) { 
  3. // 上一次触发回调的时间 
  4. let last = 0 
  5.   
  6. return function () { 
  7.     let context = this 
  8.     let args = arguments 
  9.     let now = +new Date() 
  10.       
  11.     // 判断上次触发的时间和本次触发的时间差是否小于设置的间隔时间 
  12.     if (now - last >= interval) { 
  13.     // 如果时间间隔大于我们设定的时间间隔阈值,则执行回调 
  14.         last = now; 
  15.         fn.apply(context, args); 
  16.     } 
  17.   } 
  18. // 绐scroll事件增加节流 
  19. const newScroll = throttle(() => console.log('滚动了'), 1000) 
  20. document.addEventListener('scroll', newScroll) 

事件防抖Debounce

与事件节流怡好相反,事件防抖只认最后一次,不管你前面触发了多少次我都不管,我只执行你最后一次触发事件的回调,代码实现如下:

  1. // fn执行的函数, delay是延迟多久执行的时间, 意为多久后才触发事件,单位毫秒 
  2. function debounce(fn, delay) { 
  3. let timer = null 
  4. return function () { 
  5.   let context = this 
  6.   let args = arguments 
  7.   // 每次事件被触发时,都去清除之前的旧定时器 
  8.   if(timer) { 
  9.       clearTimeout(timer) 
  10.   } 
  11.   timer = setTimeout(function () { 
  12.     fn.apply(context, args) 
  13.   }, delay) 
  14. const newScroll = debounce(() => console.log('滚动了'), 1000) 
  15. document.addEventListener('scroll', newScroll) 

函数防抖的应用场景

连续的事件,只需触发一次回调的场景有:

搜索框搜索输入。只需用户最后一次输入完,再发送请求

手机号、邮箱验证输入检测

窗口大小Resize。只需窗口调整完成后,计算窗口大小。防止重复渲染。

函数节流的应用场景

间隔一段时间执行一次回调的场景有: 

  • 滚动加载,加载更多或滚到底部监听
  • 百度搜索框,搜索联想功能
  • 高频点击提交,表单重复提交

 

责任编辑:武晓燕 来源: 新钛云服
相关推荐

2023-12-18 07:37:17

JavaScript防抖节流

2023-12-21 08:51:37

防抖节流Vue.js

2021-11-19 09:01:09

防抖节流前端

2022-04-01 07:52:42

JavaScript防抖节流

2024-10-12 09:33:24

消息队列多线程并行编程

2024-03-08 08:26:20

防抖节流delay​

2022-02-22 08:29:59

Vue前端防抖

2021-05-27 09:00:00

Node.js开发线程

2022-05-15 22:08:58

ReactHookdebounce

2017-04-25 16:20:10

页面优化滚动优化

2021-12-13 07:50:14

前端性能优化

2024-06-14 09:30:58

2024-01-05 08:49:15

Node.js异步编程

2024-05-28 09:26:46

2016-10-20 19:07:10

Javascript事件冒泡与捕获

2017-08-16 10:36:10

JavaScriptNode.js事件驱动

2024-07-01 08:27:05

KeyAndroid按键事件

2024-08-29 15:26:21

2024-06-25 08:43:25

C#编程模型

2021-12-09 10:57:19

防抖函数 Debounce
点赞
收藏

51CTO技术栈公众号