js之防抖函数

防抖原理事件响应函数在一段时间后才执行，如果这段时间内再次调用，则重新计算执行时间。意思是如果在规定的时间内无论你怎么触发事件都不会执行，只有在最后一次触发事件后并且在规定的时间内无触发事件操作才会执行。防抖原理举例(这里以点击按钮为例)：设置防抖的时间为2秒；点击一次按钮，则开始倒计时；如果在2秒内再次点击按钮，则重新从2秒开始倒计时；如果2秒过后没有再点击按钮，则执行点击按钮对应的事件，否则就

RayShyy

6864人浏览 · 2022-04-10 14:10:31

RayShyy · 2022-04-10 14:10:31 发布

防抖原理

事件响应函数在一段时间后才执行，如果这段时间内再次调用，则重新计算执行时间。
意思是如果在规定的时间内无论你怎么触发事件都不会执行，只有在最后一次触发事件后并且在规定的时间内无触发事件操作才会执行。

防抖原理举例(这里以点击按钮为例)：

设置防抖的时间为2秒；
点击一次按钮，则开始倒计时；
如果在2秒内再次点击按钮，则重新从2秒开始倒计时；
如果2秒过后没有再点击按钮，则执行点击按钮对应的事件，否则就再次从2秒开始倒计时。

代码实现(这里以点击按钮为例)

实现过程讲解(使用定时器实现)：

给按钮添加点击事件；
当用户点击按钮后，先使用clearTimeout清除延时操作；
然后使用setTimeout设置延时操作；
如果在规定时间内再次点击按钮，则回到第二步；
如果在规定时间内没有点击按钮，则执行按钮对应的事件函数。

代码实现

<body>
    <button>付款</button>
    <script>
    	// 获取button按钮元素
        const btn = document.querySelector("button");
        // 定义付款操作函数
        function payMoney() {
        	console.log("付款成功");
        }
        // 定义防抖函数
        // func: 点击按钮要执行的函数
        // delay: 防抖时间
        function debounce(func, delay) {
        	// 设置定时器标识
        	let timer;
        	// 难点返回事件绑定函数
        	return function() {
        		// func指定this
        		let context = this;
        		// func参数
        		let args = arguments;
        		// 先清除定时器
        		clearTimeout(timer);
        		//设置定时器
        		timer = setTimeout(() => {
        			// 调用函数
        			func.apply(context, args);
        		}, delay);
        	}
        }
		// 绑定点击事件
		btn.addEventListener("click", debounce(payMoney, 1000))
    </script>
</body>