防抖的实现

互联网里的布里茨

于 2018-12-18 20:55:55 发布

阅读量1.1k

点赞数

分类专栏： js 文章标签：不知道的js

js 专栏收录该内容

20 篇文章

订阅专栏

本文深入讲解了函数防抖的概念及其实现方式，特别是在实时搜索和拖拽等高频触发场景下的应用。通过具体代码示例，展示了如何使用JavaScript实现防抖功能，有效减少不必要的函数调用，提高网页性能。

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

函数防抖就是在函数频繁触发情况时，只有足够空闲的时间，才执行一次。

场景：
实时搜索（keyup）
拖拽（mousemove）

上代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>防抖</title>
</head>
<body>
	<input type="text" id="inp">
	<script>
	var oInp = document.getElementById('inp');

	function debounce(handler,delay){
		var timer = null;
		return function(){
			var _self = this;//绑定this
			var _arg = arguments;//绑定事件对象
			clearTimeout(timer);
			timer = setTimeout(function(){
				handler.apply(_self,[_arg]);
			},delay)
		}
	}

	function ajax(e){
		console.log(e,this.value);
	}
	oInp.oninput = debounce(ajax,1000);
	
	</script>
</body>
</html>