JavaScript防抖功能（js防抖函数，防抖功能的应用与解析，手把手教学）

北城笑笑

已于 2023-07-18 09:28:02 修改

阅读量1.2w

点赞数 11

分类专栏： JavaScript 文章标签：前端 javascript

于 2023-04-04 09:01:14 首次发布

本文链接：https://blog.csdn.net/weixin_65793170/article/details/129930895

版权

JavaScript 专栏收录该内容

37 篇文章 1 订阅

订阅专栏

简述：js的防抖功能大家都比较熟悉，这里重新给大家详细的介绍一下js防抖函数的解析与应用。防抖就是某一高频事件不断被触发时，仅在最后一次真正执行事件处理代码，将多次执行变为最后一次执行，具体点就是我们在触发高频事件后，n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。其实，防抖和节流都是防止函数多次调用。

JavaScript防抖函数详解

防抖函数是JavaScript中常用的一种函数优化技术，可以有效减少一些高频率触发的事件所带来的性能问题。本文将详细介绍JavaScript防抖函数的实现原理、应用场景和使用方法。

一、防抖函数的实现原理？

防抖函数的实现原理非常简单，就是在一定时间内只执行最后一次触发的事件，忽略之前触发的所有事件。具体实现方法如下：

1、设置一个定时器，当触发事件时，如果定时器存在，则清除定时器。

2、重新设置一个定时器，延迟一定时间后执行事件。

3、如果在延迟时间内再次触发事件，则重复1和2的步骤。

4、如果延迟时间到了，执行事件。

二、防抖函数的应用场景？

防抖函数适用于一些高频率触发的事件，比如：

1、输入框实时搜索，避免频繁请求后端接口。

2、浏览器窗口resize事件，避免频繁触发DOM操作。

3、滚动条滚动事件，避免频繁更新DOM。

4、按钮点击事件，避免重复提交表单。

三、防抖函数的使用方法？

1、手写实现防抖函数

可以通过手写实现防抖函数，代码如下：

//HTMl
<body>  
    <button>提交</button>
</body>

//JavaScript
<script>
    	// 首先使用querySelector方法获取按钮元素
        const btn = document.querySelector("button");
        // 定义提交操作函数
        function payMoney() {
        	console.log("付款成功");
        }
        // 定义防抖函数
        // fn: 点击按钮要执行的函数
        // delay: 延迟时间
        function debounce(fn, delay) {
        	// 设置定时器标识（写在return函数外面，方便下面内部函数获取）
        	let timer;
        	// 返回函数，不然调用debounce会立即执行此函数
        	return function() {
        		// fn指定this
        		let context = this;
        		// fn参数
        		let args = arguments;
        		// 先清除定时器
        		clearTimeout(timer);
        		//设置定时器
        		timer = setTimeout(() => {
        			// 调用函数
        			fn.apply(context, args);
        		}, delay);
        	}
        }
		// 给按钮添加点击监听事件，点击时，执行debounce函数
		btn.addEventListener("click", debounce(payMoney, 1000))
</script>


//JavaScript防抖核心代码
<script>
    function debounce(fn, delay) {
      let timer = null;
      return function() {
        clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, arguments);
        }, delay);
      }
    }
</script>

这样用户在频繁点击按钮时，就可以执行延迟操作，防止函数多次调用，完成防抖功能；

手写实现防抖函数注意事项：
（1）、debounce函数不能直接调用fn函数，因为按钮绑定的事件函数是直接调用的，所以使用返回函数，否则函数会立即执行；

（2）、每次点击先清除延时操作，clearTimeout不能清除一个没有定义的变量名，所以需要先定义一个变量timer用来清除和定义延时操作；

（3）、在函数外层定义timer，函数内部方便使用，让这些独立的执行函数有联系；

（4）、调用函数fn，容易忽略this指向，需要将this指向调用者。

2、Lodash库实现防抖函数

Lodash是一个非常流行的JavaScript工具库，它提供了许多方便的函数，包括防抖函数。可以通过Lodash库来实现防抖函数，代码如下：

npm install -save lodash    /    npm install lodash 

import debounce from 'lodash/debounce';

function handleInput(event) {
  // 在250ms内只执行最后一次输入
}

const debouncedInput = debounce(handleInput, 250);
input.addEventListener('input', debouncedInput);

四、防抖函数的注意事项？

1、防抖函数的延迟时间需要根据实际情况设置，设置过短可能会导致事件被频繁触发，设置过长可能会影响用户体验。

2、防抖函数返回的是一个新函数，所以需要将其赋值给原来的函数。

3、防抖函数的this指向需要明确，可以使用箭头函数或者bind方法来解决。

总之，防抖函数是一种非常实用的JavaScript函数优化技术，能够有效减少一些高频率触发的事件所带来的性能问题，提高网站的用户体验。

感觉有用，就一键三连，感谢(●'◡'●)

北城笑笑

关注

11
点赞
踩
26

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript防抖功能（js防抖函数，防抖功能的应用与解析，手把手教学）

防抖就是某一高频事件不断被触发时，仅在最后一次真正执行事件处理代码，将多次执行变为最后一次执行，具体点就是我们在触发高频事件后，n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。其实，防抖和节流都是防止函数多次调用。
复制链接

扫一扫