js 防抖

最新推荐文章于 2025-05-18 00:11:08 发布

原创最新推荐文章于 2025-05-18 00:11:08 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了JavaScript中的防抖(debounce)函数实现原理及其应用。通过两个按钮的点击事件，展示了如何使用防抖函数来避免在短时间内连续触发多次事件处理，从而提高网页性能和用户体验。文章提供了完整的HTML和JavaScript代码示例。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button onclick="aclick()">抖动测试1</button>
	<button onclick="bclick()">抖动测试2</button>
	<script>
	
		var b1 = function(){
			console.log("bbb");
		}
		var a1 = function(){
			console.log("aaa");
		}
		var a = debounce(a1,2000)
		var b = debounce(b1,2000)
		function debounce(fn, wait) {
    		var timeout = null;
 
    		var debounced = function() {
	        	// 用that保存dom2级事件处理中绑定的元素对象
	        	// arg保存默认传给事件处理程序的参数
	    		var that = this,
	    			arg = arguments;
	    		var callNow = !timeout;
	 
	        	if (timeout) clearTimeout(timeout);
	        	timeout = setTimeout(function(){
	        		timeout = null
	        	}, wait)
	        	if(callNow){
	        		fn.apply(that,arg);            
	        	};
    		}
    		return debounced;
		}
		function aclick(){
			a();
		}
		function bclick(){
			b();
		}
	</script>
</body>
</html>