JavaScript防抖节流

最新推荐文章于 2024-09-11 15:33:18 发布

Wennsai

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量110

点赞数

文章标签： javascript html5 html

本文链接：https://blog.csdn.net/Wennsai/article/details/120564814

版权

本文介绍了JavaScript中两种重要的函数优化技术——防抖和节流。防抖技术确保在最后一次事件触发后的一段时间内执行函数，而节流则保证在设定的时间间隔内至少执行一次函数。通过示例代码展示了如何实现防抖和节流，以优化频繁触发的事件处理，提高用户体验。

摘要由CSDN通过智能技术生成

一，认识防抖，节流

1，什么是防抖：

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。

2，什么是节流：

高频事件触发，但在n秒内只会执行一次，节流会降低函数的执行频率。

3，函数节流与 函数防抖都是为了限制函数的执行频率，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

4，区别：函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。

        防抖
		<div class="box1">1</div>
		节流
		<div class="box2">1</div>

        var box1 = document.querySelector('.box1');
		var box2 = document.querySelector('.box2');
		var num1 = parseInt(box1.innerHTML);
		var num2 = parseInt(box2.innerHTML);
		var boxTime = null;
		var boxTime2 = null;

		//防抖
		box1.onclick = function() {
			clearTimeout(boxTime);
			boxTime = setTimeout(() => {
				num1++;
				box1.innerHTML = num1;
			}, 1000);
		}

		//每隔2秒执行一次（节流）
		var bol = true;
		box2.onclick = function() {
			if (bol) {
				bol = false;
				boxTime2 = setTimeout(function() {
					num2++;
					box2.innerHTML = num2;
					bol = true;
				}, 1000)
			}
		}