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

àì夳堔傛蜴生んèń 2023-10-08 23:34 82阅读 0赞

#### **简述：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函数优化技术，能够有效减少一些高频率触发的事件所带来的性能问题，提高网站的用户体验。**

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