首页 前端知识 JavaScript防抖功能(js防抖函数,防抖功能的应用与解析,手把手教学)

JavaScript防抖功能(js防抖函数,防抖功能的应用与解析,手把手教学)

2024-02-26 20:02:23 前端知识 前端哥 570 694 我要收藏

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

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2709.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!