函数节流和防抖（三个版本方法）_防抖节流有几个版本-优快云博客

本文链接：https://blog.youkuaiyun.com/Aurora_sm/article/details/120635111

本文介绍了JavaScript中防止短时间内频繁触发同一事件的三种方法：立即执行版、时间戳版和定时器版的事件防抖与节流技术。通过示例代码展示了如何在鼠标移动事件中应用这些技术，以限制count函数的执行频率，提高页面性能。

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

设置案例所用的显示内容


<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#content {
			width:150px;
			line-height:150px;
			text-align:center;
			color: #fff;
			background-color:#ccc;
			font-size:80px;
		}
	</style>
</head>
<body>
	<div id="content">1</div>
</body>
<script>
    let num = 1;
    let content = document.getElementById('content');
 
    function count() {
        content.innerHTML = num++;
    };
</script>

*短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。

*立即执行版


	// // 立即执行版
	// function debounce(func, wait) {
	//     let timer;
	//     return function() {
	//       let context = this; // 这边的 this 指向谁?
	//       let args = arguments; // arguments中存着e
	 
	//       if (timer) clearTimeout(timer);
	 
	//       let callNow = !timer;
	 
	//       timer = setTimeout(() => {
	//         timer = null;
	//       }, wait)
	 
	//       if (callNow) func.apply(context, args);
	//     }
	// }

时间戳版

// 时间戳版
	// function throttle(func, wait) {
	//     let previous = 0;
	//     return function() {
	//       let now = Date.now();
	//       let context = this;
	//       let args = arguments;
	//       if (now - previous > wait) {
	//         func.apply(context, args);
	//         previous = now;
	//       }
	//     }
	// }

定时器版

// 定时器版
	function throttle(func, wait) {
	    let timeout;
	    return function() {
	      let context = this;
	      let args = arguments;
	      if (!timeout) {
	        timeout = setTimeout(() => {
	          timeout = null;
	          func.apply(context, args)
	        }, wait)
	      }
	    }
	}
	content.onmousemove = throttle(count,1000);