防抖与节流

不是独角兽

已于 2022-05-06 10:22:52 修改

阅读量393

点赞数

CC 4.0 BY-SA版权

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

于 2022-05-06 10:22:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_51187159/article/details/124601744

JS 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了JavaScript中的性能优化技巧——节流和防抖技术，通过代码实例阐述了它们的工作原理和区别。防抖用于限制事件的执行频率，确保在连续触发后只执行一次，而节流则保证在一定时间间隔内只执行一次。这两种技术常用于处理高频率的事件，如窗口resize、滚动和输入监听，以提升前端应用的性能。同时，文章还提供了具体的防抖和节流函数实现，并给出了它们在搜索框输入、窗口大小调整等场景的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

是什么

本质上是优化高频率执行代码的一种手段

如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能.

为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用 throttle（节流）和debounce（防抖）的方式来减少调用频率

定义

节流: n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效
防抖: n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时

代码实现

防抖

    <script>
		function show() {
			console.log('666');
		}

		//防抖函数
		function debounce(func) {
			func();
		}

		const btn = document.querySelector('button');
		btn.addEventListener('click', debounce(show));
	</script>

可以发现防抖函数中直接执行show函数时，还没有点击按钮时，控制台就出现了点击按钮的消息，这样写的话，在定义监听函数的时候就直接执行了函数.

可以采用高阶函数(在函数中返回函数)的方式解决

    <script>
		function show() {
			console.log('666');
		}

		//防抖函数
		function debounce(func) {
            //高阶函数
			return function () {
				func();
			};
		}

		const btn = document.querySelector('button');
		btn.addEventListener('click', debounce(show));
	</script>

        //防抖函数
		function debounce(func, delay) {
			//高阶函数
			return function () {
				let timer;
				clearTimeout(timer);
				timer = setTimeout(function () {
					func();
				}, delay);
			};
		}

清除延时要在建立延时的前面，连续点击按钮5次，全部消息都陆续执行，并没有实现重新计时的功能，是因为这些独立的执行函数之间并没有任何关系.

可以采用闭包的方式，将timer这个变量定义放在函数的外围，因为作用域链的关系，所有独立函数都能访问到timer这个变量

        //防抖函数
		function debounce(func, delay) {
			let timer;
			//高阶函数
			return function () {
				clearTimeout(timer);
				timer = setTimeout(function () {
					func();
				}, delay);
			};
		}

点击按钮5次，控制台也只显示一条信息

防抖功能简单实现:

    <script>
		function show() {
			console.log('666');
		}

		//防抖函数
		function debounce(func, delay) {
			let timer;
			//高阶函数
			return function () {
				let context = this; // 保存this指向
				let args = arguments; // 拿到event对象
				clearTimeout(timer);
				timer = setTimeout(function () {
					func.apply(context, args);
				}, delay);
			};
		}

		const btn = document.querySelector('button');
		btn.addEventListener('click', debounce(show, 1000));
	</script>

防抖如果需要立即执行，可加入第三个参数用于判断，实现如下

        function show() {
			console.log('666');
		}

		//防抖函数
		function debounce(func, delay, immediate) {
			let timer;
			//高阶函数
			return function () {
				let context = this; // 保存this指向
				let args = arguments; // 拿到event对象
				if (timer) clearTimeout(timer); // timer 不为null
				if (immediate) {
                    // 第一次会立即执行，以后只有事件执行后才会再次触发
					let callNow = !timer; 
					timer = setTimeout(function () {
						timer = null;
					}, delay);
					if (callNow) {
						func.apply(context, args);
					}
				} else {
					timer = setTimeout(function () {
						func.apply(context, args);
					}, delay);
				}
			};
		}

		const btn = document.querySelector('button');
		btn.addEventListener('click', debounce(show, 1000, 1));

节流

完成节流可以使用时间戳与定时器的写法

使用定时器写法，delay毫秒后第一次执行，第二次事件停止触发后依然会再一次执行

        function coloring() {
			const r = Math.floor(Math.random() * 255);
			const g = Math.floor(Math.random() * 255);
			const b = Math.floor(Math.random() * 255);
			document.body.style.backgroundColor = `rgb(${r},${g},${b})`;
		}

		function throttle(func, delay) {
			let timer;
			return function () {
				let context = this;
				let args = arguments;
				//判断触发事件是否在时间间隔内
				/* timer被赋值了，表示任务还在等待执行，暂时不改变timer的值，
                如果timer没被赋值，就给它赋值执行任务 */
				if (timer) {
					return;
				}
				timer = setTimeout(function () {
					func.apply(context, args);
					timer = null;
				}, delay);
			};
		}

		window.addEventListener('resize', throttle(coloring, 1000));

使用时间戳写法，事件会立即执行，停止触发后没有办法再次执行

        function coloring() {
			const r = Math.floor(Math.random() * 255);
			const g = Math.floor(Math.random() * 255);
			const b = Math.floor(Math.random() * 255);
			document.body.style.backgroundColor = `rgb(${r},${g},${b})`;
		}

		function throttle(func, delay) {
			let pre = 0;
			return function () {
				let now = new Date();
				let context = this;
				let args = arguments;
				if (now - pre > delay) {
					func.apply(context, args);
					pre = now;
				}
			};
		}

		window.addEventListener('resize', throttle(coloring, 1000));