函数防抖与节流工具

最新推荐文章于 2022-08-09 13:06:09 发布
最新推荐文章于 2022-08-09 13:06:09 发布
阅读量534 收藏 5
点赞数 1
分类专栏： js总结 文章标签： 函数防抖 防抖与节流思路 vue防抖 uniapp防抖 防抖与节流的实现
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z1783883121/article/details/116021206
版权

函数防抖与节流工具

先贴代码与使用方法再讲理论：

class mains {
	constructor(arg) {
		this.timer, this.flag = true;
	}
	/**
	 * 函数防抖（立即执行版与延迟执行）
	 * @param {Function}  func  需要执行的函数
	 * @param {Number} delay 延迟/等待时间
	 * @param {Array} args 调用方法的参数
	 * @param {Boolean}  runNow 是否立即执行
	 * @param other 温馨提示：无参更改runNow市args传[]  即可
	 */
	debounce(func, delay, args = [], runNow = true) {
		clearTimeout(this.timer);
		runNow ? (() => {
			if (this.flag) {
				this.flag = false;
				func(...args);
			}
			this.timer = setTimeout(() => {
				this.flag = true;
			}, delay);
		})() : (() => {
			this.timer = setTimeout(() => {
				func(...args);
			}, delay);
		})()
	}
	/**
	 * 函数节流（立即执行版与延迟执行）
	 * @param {Function}  func  需要执行的函数
	 * @param {Number} delay 延迟/等待时间
	 * @param {Array} args 调用方法的参数
	 * @param {Boolean}  runNow 是否立即执行
	 */
	throttling(func, delay, args = [], runNow = true) {
		if (this.flag) {
			this.flag = false;
			clearTimeout(this.timer);
			runNow ? (() => {
				func(...args);
				this.timer = setTimeout(() => {
						this.flag = true;
					},
					delay);
			})() : (() => {
				this.timer = setTimeout(() => {
						this.flag = true;
						func(...args);
					},
					delay);
			})();
		}
	}
}

const debounceUtils = new mains();//注意：如果一个方法里同时调用debounce和throttling需要把本行注释单独引入new，否则只会触发后调用的

export default debounceUtils;
vue/uniapp等有模块概念的框架原生
impor导入文件通过Vue.prototype或其他方式将其挂载至原型或全局上调用debounce(防抖)、throttling(节流)方法传入参数即可或者通过import引入使用使用script引入然后调用debounceUtils.debounce(防抖)或debounceUtils.throttling(节流)方法传入参数即可

码云uni示例

概述：（理论）

1.防抖(防止某件事在一时间多次触发，例如：在表单提交时请求还未相应，用户以为没点到有重新点了几下)。常用于表单提交以及下单/加入购物车

2.节流(也是为了防止某件事在一时间多次触发,例如饿了么、美团、滴滴抢单或者是搜索商品)。常用于搜索商品/下拉刷新限制/抢单类

区别：

触发时间
防抖最后一次触发之后重新计时，倒计时结束之后才能触发下一次
节流每隔一段时间(时间结束之后)才能触发下一次

总结： 防抖是在最后一次触发之后重新计时，倒计时结束之后才能触发下一次。节流是每隔一段时间(时间结束之后)才能触发下一次

实现思路：

防抖和节流的实现方式有许多种（但网络上大部分都是使用apply来实现的这对vue、uni好像不太友好）。

正题

因为都与时间有关所有使用js中的定时器，“每隔一段时间（时间结束之后），最后一次触发” 所以我们选择使用 setTimeout() 来实现

一、防抖：

（1）当我们使用函数时每调用一次他就会执行一次，我们实现的效果都需要延迟/等待一段时间后才能执行。所以我们把他放入定时器中(这里我们设置时间为2000)，这时我们运行是这样的：连续点击5次(从第一次点击之后2秒后执行了我们传入的方法触发了5次，这是因为你点击5次所以就调用了5次【小白能理解吧😄】)

实现效果是这样的
在这里插入图片描述

//相关代码：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    //防抖函数
    function debounce(func, delay) {
      setTimeout(() => {
        func();
      }, delay)
    }
    // 点击事件
    function add() {
      debounce(function () {
        console.log(1111111)
      }, 2000)
    }
  </script>
</body>

</html>

（2）回顾一下【总结】在最后一次触发之后，所以这时我们的思路时使用cleaTimeout()方法把之前的定时器清掉只留下最后一个触发的（由于在js中有函数作用域所以我们不能将定时函数放在函数【debounce】中）这时我们的代码是这样的：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    //防抖函数
    function debounce(func, delay) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        func();
      }, delay)
    }
    // 点击事件
    function add() {
      debounce(function () {
        console.log(1111111)
      }, 2000)
    }
  </script>
</body>

</html>

实现效果是这样的：(嗯？有点内味了。好吧差不多就这样把)

在这里插入图片描述

（3）先放下之前的，我们再考虑一下如何实现立即执行版本的？【思考ing… 立即执行版就是一调用他就先执行函数，再进行倒计时，倒计时结束之后才能触发下一次，如果倒计时还没结束又被调用了那就重新开始倒计时】嗯？这么简单？那我们就这样吧：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    let flag = true;//定义一个置换变量，用来判断是否可以执行函数。

    //防抖函数
    function debounce(func, delay) {
      clearTimeout(timer)
      if (flag) {
        // 进入这里说明可以调用了
        flag = false;
        func();
      }
      timer = setTimeout(() => {
        flag = true;
      }, delay)
    }
    // 点击事件
    function add() {
      debounce(function () {
        console.log(1111111)
      }, 2000)
    }
  </script>
</body>

</html>

实现效果是这样的：(嗯？好像又有点内味了。好吧差不多又就这样把)

在这里插入图片描述

（4）最后合并一下立即执行版和非立即执行版：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    let flag = true;//定义一个Boolean变量，用来判断是否可以执行函数。

    //防抖函数
    function debounce(func, delay, runNow=false) {
      clearTimeout(timer)
      runNow ? (() => {
        if (flag) {
          // 进入这里说明可以调用了
          flag = false;
          func();
        }
        timer = setTimeout(() => {
          flag = true;
        }, delay)
      })() : (() => {
        timer = setTimeout(() => {
          func();
        }, delay)
      })()
    }
    // 点击事件
    function add() {
      debounce(function () {
        console.log(1111111)
      }, 2000)
    }
  </script>
</body>

</html>

二、节流

（1）第一步思路也和防抖1类似

（2）我们再回顾一下【总结】每隔一段时间才能触发emm… 这个不是和防抖立即执行版类似么（倒计时结束之后才能触发）所以我们把防抖立即执行版的代码复制下来稍稍更改一下不就行了么？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    let flag = true;//定义一个置换变量，用来判断是否可以执行函数。

    //节流函数
    function throttling(func, delay, runNow = false) {
      if (flag) {
        flag = false;
        clearTimeout(timer)
        timer = setTimeout(() => {
          func();
          flag = true;
        }, delay)
      }
    }
    // 点击事件
    function add() {
      throttling(function () {
        console.log(1111111)
      }, 1000)
    }
  </script>
</body>

</html>

实现效果是这样的：

在这里插入图片描述

（2）立即执行版？立即执行版不就是触发之后就执行嘛（不就是在非立即执行版上稍稍改动一下位置就行了么？）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    let flag = true;//定义一个置换变量，用来判断是否可以执行函数。

    //节流函数
    function throttling(func, delay, runNow = false) {
      if (flag) {
        flag = false;
        func();
        clearTimeout(timer)
        timer = setTimeout(() => {
          flag = true;
        }, delay)
      }
    }
    // 点击事件
    function add() {
      throttling(function () {
        console.log(1111111)
      }, 1000)
    }
  </script>
</body>

</html>

实现效果是这样的：

在这里插入图片描述

（3）最后合并一下就是这样的了？

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    let flag = true;//定义一个置换变量，用来判断是否可以执行函数。

    //节流函数
    function throttling(func, delay, runNow = true) {
      if (flag) {
        flag = false;
        clearTimeout(timer)
        runNow ? (() => {
          func();
          timer = setTimeout(() => {
            flag = true;
          }, delay)
        })() : (() => {
          timer = setTimeout(() => {
            func();
            flag = true;
          }, delay)
        })()
      }
    }
    // 点击事件
    function add() {
      throttling(function () {
        console.log(1111111)
      }, 1000)
    }
  </script>
</body>

</html>

三、最后(我们思考一下调用函数是否可能会需要传参呢？)所有就再增加一个形参吧！

最后的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>防抖</title>
</head>

<body>
  <button id="btn" onclick="add()">提交</button>

  <script>
    let timer;
    let flag = true;//定义一个置换变量，用来判断是否可以执行函数。

    //防抖函数
    function throttling(func, delay, args = [], runNow = true) {
      if (flag) {
        flag = false;
        clearTimeout(timer)
        runNow ? (() => {
          func(...args);
          timer = setTimeout(() => {
            flag = true;
          }, delay)
        })() : (() => {
          timer = setTimeout(() => {
            func(...args);
            flag = true;
          }, delay)
        })()
      }
    }

    //防抖函数
    function debounce(func, delay, args = [], runNow = false) {
      clearTimeout(timer)
      runNow ? (() => {
        if (flag) {
          // 进入这里说明可以调用了
          flag = false;
          func(...args);
        }
        timer = setTimeout(() => {
          flag = true;
        }, delay)
      })() : (() => {
        timer = setTimeout(() => {
          func(...args);
        }, delay)
      })()
    }

    // 点击事件
    function add() {
      // 调用外部方法
      debounce(runMethord, 1000, [666], true)
    }

    // 要调用/触发的方法
    function runMethord(num) {
      console.log(num);
    }
  </script>
</body>

</html>

PS:上面的代码会有一个小小的bug(这里不描述)，所以我们将其封装成class就可以很好的使用

acqui~Zhang
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
如何在面试中手写出javascript节流和防抖函数
01-18
面试的时候我们经常会问别人是理解什么是节流和防抖，严格的可能要求你写出节流和防抖函数，这里我们抛开loadsh工具库手写节流和防抖 1.节流函数throttle // 节流方案1，每delay的时间执行一次，通过开关控制 ...
前端学习：js实现倒计时，拖拽事件，防抖，节流，懒加载，图片的onload事件，lazyload插件的使用，上传头像
qq_45926448的博客
07-14 564
js实现倒计时，拖拽事件，防抖，节流，懒加载，图片的onload事件，lazyload插件的使用，上传头像
防抖与节流对比
酸奶的博客
03-23 690
一、防抖(debounce) 1. 基本概念 高频事件触发，延迟n秒后回调函数执行一次，在n秒内事件再次被触发则重新计时。 借助setTimeout和clearTimeout实现，只有最后一次触发生效。 2. 应用 1）输入框查询请求，连续输入一串字符后才执行查询请求。有效减少请求次数，节约请求资源。 3. 示例 // 计时器 var timer = false; window.onscroll = function(){ clearTimeout(timer); timer = set
防抖节流的理解和防抖节流工具类的封装
weixin_47813845的博客
01-11 263
首先，我们要清楚防抖和节流的区别 防抖 在事件被频繁触发时，只有上一次与下一次空出足够的空闲时间，事件才会执行 节流 在事件频繁触发时，规定时间内，事件只会执行一次 然后我们来看封装的工具类函数 //防抖:在事件被频繁触发时，只有上一次与下一次空出足够的空闲时间，事件才会执行 function debounce(fnEvent, time) { var _time = null return function () { ..
防抖节流工具类库loadsh
weixin_61153206的博客
01-23 339
Java版的防抖(debounce)和节流(throttle)
Chenhui98的博客
08-09 2032
Java版的防抖(debounce)和节流(throttle)
WindlikeUtils一个基于函数式编程思想开发的Javascript工具库
08-11
一个基于函数式编程思想开发的Javascript工具库，所有的函数都没有副作用，拥有非常多的实用性功能，比如函数的防抖，节流，柯里化，日期格式化，解析地址等等。
blog:记录精品项目，日常总结，手写api，源码学习，常用工具
03-23
精品项目 基于Nodejs + eggjs + Mongodb编写的内容... 节流（节流） 防抖 承诺 箭头函数 用函数实现useEffect功能 片断阳离子化 斑点去重 类数组转化为数组 深拷贝 Array.prototype.filter（） Array.prototype.map
nutils-js:nutils-js是一个模块化、高性能的 JavaScript 实用工具库
05-12
前端开发中经常会遇到Array、Object、String、Number等数据处理，或者是防抖节流函数等性能优化亦或是 URL 参数处理、类型判断等等操作，为了提高开发效率，我将这些常见公共方法进行抽离并封装好，发布在 npm 上，...
vue-template-pc:vue脚手架-模板
04-28
vue-template-pc vue脚手架-模板 启动方式: 将项目拉到本地,安装依赖(npm i); 建议装上yarn 和 nrm ...2020/1/17 优化按钮防抖函数和节流函数 防抖函数是首部触发还是尾部触发,根据常规交互逻辑,默认置为
javascript防抖函数debounce详解
12-09
定义及解读 防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数，在这 3 秒内如果遇到函数调用请求就重新计时 3 秒，直至新的 3 秒内没有函数调用请求，此时执行函数，不然就以此类推重新计时。 举一个小例子：假定在做公交车时，司机需等待最后一个人进入后再关门，每次新进一个人，司机就会把计时器清零并重新开始计时，重新等待 1 分钟再关门，如果后续 1 分钟内都没有乘客上车，司机会认为乘客都上来了，将关门发车。 此时「上车的乘客」就是我们频繁操作事件而不断涌入的回调任务；「1 分钟」就是计时器，它是司机决定「
防抖实例-短信验证-倒计时
大左的博客
07-05 300
代码实现 <el-form-item label="短信验证码:" prop="verificationCode"> <el-input clearable v-model="addBankCardForm.verificationCode" placeholder="请输入短信验证码"> <el-button @click="getPhoneNumber(addBankCardForm)" slot="append">.
函数的节流与防抖
温壁
06-20 1535
1、节流--定时器 window.onload = ()=>{ let div = document.getElementById("div"); div.onmousemove = throttle(move,2000); } function move(){ console.log(13546); } function throttle(fn,wait){ var timer = null; return function(){ var
常用工具函数【节流函数和防抖函数】
weixin_43837268的博客
09-24 149
/** * @desc 函数防抖 * @param {需要防抖的函数} func * @param {延迟时间} wait */ export function debounce(func, wait = 500) { // 缓存一个定时器id let timer = 0; // 这里返回的函数是每次用户实际调用的防抖函数 // 如果已经设定过定时器了就清空上一次的定时器 // 开始一个新的定时器，延迟执行用户传入的方法 return functi..
JS常用工具函数-节流和防抖
风萧萧兮易水寒
08-29 1104
节流和防抖是属于面试和日常开发过程中常见的问题 函数防抖(debounce) 在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。用户在不断输入值时，用防抖来节约请求资源。 场景：监听input的每一次onkeyup事件请求，调用接口做模糊匹配。在频繁的输入中，如果每次都去调用接口，不仅会造成资源的浪费，而且在实际场景中，用户输入完成后再去请求。 export const ...
函数防抖和节流
weixin_34405557的博客
08-04 265
在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。 让我们先来看看在事件持续触发的过程中频繁执行函数是怎样的一种情况。 html 文件中代码如下 &lt;div id="content" st...
防抖节流工具型方法的封装
小王几pl
01-17 3147
封装防抖工具型方法 /** * @description: 防抖函数的封装 * @param {Function} callback : 要执行的代码 * @param {String} time : 要倒计时的时间(停止后多久执行逻辑代码) * @return: 返回防抖函数 */ function fandou (callback, time) { let timer = null // 声明一个将要存放定时器的变量 return function () { // 返回一个函数
防抖函数实
02-19 157
防抖函数原理 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计算。 适用场景 按钮提交场景：防止多次提交按钮，只执行最后一次提交 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索词联想功能等 函数实现 /** * 防抖函数 */ const debounce = (fn, delay) => { let timer =...
发送验证码倒计时
u012138854的博客
02-20 105
downTime() { let time = setInterval(() => { this.time = this.time - 1; if (this.time == 0) { clearInterval(time); this.time_start = false; this.time = 60; } }, 1000); },
vue中的防抖与节流插件
最新发布
08-17
Lodash是一个JavaScript实用工具库，它提供了许多常用的函数和方法，包括防抖和节流函数。使用Lodash的`debounce`和`throttle`函数可以很方便地实现防抖和节流。 安装Lodash： ```bash npm install lodash ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

acqui~Zhang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值