节流（Throttling ）和防抖（Debouncing ）

最新推荐文章于 2025-06-22 15:45:08 发布

原创最新推荐文章于 2025-06-22 15:45:08 发布 · 671 阅读

CC 4.0 BY-SA版权

本文介绍了两种常见的事件处理优化方法：debouncing（防抖）和throttling（节流）。debouncing确保在一系列连续触发的事件之后，仅执行最后一次事件响应；而throttling则保证事件响应不会过于频繁地被调用，从而降低系统的负载。

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

为了区分这两个思想，最常用的例子就是电梯例子，我们也通过该例子来比较两个思想。当有很多人用电梯时，我们不能每来一个人，电梯都特意去送这个人一趟。这样，电梯的运行方式可以有两种优化思想

debouncing

每上一个人，从这个人开始，指定时间（比如400ms）后电梯关闭开始送人。在程序中，也就是每发生一个事件，从这个事件往后T秒，执行回调函数。

//实现函数：
	var debounce = function(func, delay) {
		var inDebounce = undefined;
		return function() {
			debugger
			var context = this,
			args = arguments;
			clearTimeout(inDebounce);
			return inDebounce = setTimeout(function() {
				return func.apply(context, args);
			}, delay);
		}
	}

<!-- 调用函数 -->
<body>
	<button >click me</button>
</body>
<script>
function aFunction(msg){
		console.log(msg);
	}
	$('button').click(debounce(function() {
		return aFunction('i am message');
	}, 400));
</script>

Throttling

从上第一个人开始，电梯指定时间循环着执行，无论中间是否上人，都是每t秒运行一次。

//实现函数：
	var throttle = function(func, limit) {
		var inThrottle = undefined;
		return function() {
			var args = arguments,
			context = this;
			if (!inThrottle) {
				func.apply(context, args);
				inThrottle = true;
				return setTimeout(function() {
					return inThrottle = false;
				}, limit);
			}
		};
	};

<!-- 调用函数 -->
<body>
	<button >click me</button>
</body>
<script>
	function aFunction(msg){
		console.log(msg);
	}
	$('button').click(throttle(function() {
		return aFunction('i am message');
	}, 400));
</script>