js 防抖

最新推荐文章于 2025-03-27 22:50:01 发布

web_hj

最新推荐文章于 2025-03-27 22:50:01 发布

阅读量129

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.csdn.net/web_hj/article/details/103613555

js 专栏收录该内容

21 篇文章

订阅专栏

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

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

<!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>