防抖和节流的简单理解

吃葡萄不吐葡萄皮嘻嘻

已于 2022-03-21 14:06:22 修改

阅读量773

点赞数 3

分类专栏： js 文章标签：前端 js

于 2022-03-21 13:51:48 首次发布

本文链接：https://blog.csdn.net/qq_45695853/article/details/123630899

版权

js 专栏收录该内容

73 篇文章 2 订阅

订阅专栏

本文深入探讨了JavaScript中的防抖(debounce)和节流(throttle)技术，这两种技术常用于优化性能，避免频繁函数调用。防抖确保在最后一次操作后才执行函数，而节流则保证在规定时间内至少执行一次。举例来说，防抖常用于登录时的发送验证码，避免连续点击；节流则应用于滚动事件监听，保证在滚动停止后执行一次处理函数。通过引入lodash库，可以轻松实现防抖和节流功能。

摘要由CSDN通过智能技术生成

一、防抖：在规定的时间第n秒后才会执行回调，如果在n秒内又被触发，则会进行重置（重新计时）；

应用场景：

登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖；
调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
文本编辑器实时保存，当无任何更改操作一秒后进行保存

//封装防抖函数
      function debounce(fn, delay = 1000) {
          // 定义一个变量
          let timer = null;
          //返回一个新函数，就是在调用这个函数
          return function () {
              //清除上一个定时器
              clearTimeout(timer)
              //创建一个新的定时器
              timer = setTimeout(() => {
                  // 调用fn
                  fn.call(this)
              }, delay)
          }
      }

举个栗子：
在这里插入图片描述

二、节流：规定在一定的时间内，只能触发一次函数。如果在规定时间内触发多次函数，只有一次生效。

应用场景：

1.监听滚动事件，下拉加载更多事件；

//封装节流函数

	function throttle(fn,delay=1000) {
	     // 定义一个flag
	     let flag = true;
	     return function () { 
	         //第一次进来不会执行：flag为false直接return
	         if (!flag) return;
	         //第一次点击把flag赋值为false,继续向下执行
	         flag = false;
	         // 创建一个定时器
	         setTimeout(() => {
	             fn.call(this)
	             // 执行回调后，把flag重置为true;
	             flag = true;
	         }, delay)
	     }
	 }

举个栗子：
在这里插入图片描述

👁‍🗨总结：函数节流是不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨✨

防抖和节流还可以通过引入第三方库lodash来实现

bootcdn引入lodash
在这里插入图片描述

防抖：

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.js"></script>
//以上防抖代码可写成如下：
inp.addEventListener('input',  _.debounce(function () {
         console.log(inp.value)
}, 1200))

节流：

<script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.core.js"></script>
//以上防抖代码可写成如下：
inp.addEventListener('click',  _.throttle(function () {
         console.log('抢购')
}, 1200))