一些优化（即时搜索之函数去抖）

最新推荐文章于 2025-09-28 09:38:11 发布

原创最新推荐文章于 2025-09-28 09:38:11 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

45 篇文章

订阅专栏

input

1 篇文章

订阅专栏

本文介绍如何使用JavaScript优化输入框的实时搜索功能，通过监听input事件而非change事件来提高用户体验，并利用函数去抖减少不必要的网络请求。

第一步，确定用哪个动作。实现输入框实时搜索：

input输入框的change事件，在输入框内容变化的时候不会触发change，要在input失去焦点的时候才会触发，当鼠标在其他地方点一下才会触发

$('input[name=myInput]').change(function() { ... });//change,失焦才触发，nono

用下面的方法会生效，input，注：IE下用 onpropertychange

$("#input_id").on('input',function(e){ 
    alert('Changed!') 
});

第二步，优化，加一个延迟，因为频繁的发送并不好，网络请求次数过多

//手写一个函数去抖

function test() {
  console.log(11)
}

function debounce(method, context) {
  clearTimeout(method.tId);
  method.tId = setTimeout(function() {
    method.call(context)
  }, 500)
}
window.onresize = function() {
  debounce(test, window);
}

函数去抖（debounce）与函数节流（throttle），可以用lodash

debounce(func, wait, immediate)：创建并返回函数的防反跳版本，将延迟函数的执行（真正的执行）在函数最后一次调用时刻的wait毫秒之后，对于必须在一些输入（多是一些用户操作）停止之后再执行的行为有帮助。将一个连续的调用归为一个！
throttle(func, wait, options)：创建并返回一个像节流阀一样的函数，当重复调用函数的时候，最多每隔指定的wait毫秒调用一次该函数； 不允许方法在每wait ms间执行超过一次！

总结：

onpropertychange：DOM任何节点的属性发生变化时触发，包括js修改的属性。但是这是IE特有的一个事件；

oninput：仅仅在input的value值发生改变才会触发，鼠标键盘复制粘贴均可以触发，但是js修改其value值则不会触发。（chrome/safari/ff/opera/IE9+）

onchange：域的内容改变，并且失去焦点时触发（js改变其内容时不会触发）。

onkeyup：在键盘松开时触发。(如果用鼠标复制粘贴则不会触发)

总代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>即时搜索小优化</title>
	</head>
	<body>
		<input type="text" id="query" />
	</body>
	<script>
		window.onload = function() {
			var oQuery = document.getElementById("query");
			
			var timer = 0;
			oQuery.oninput = function() {
				clearTimeout(timer);
				timer = setTimeout(function() {
					Query();
				}, 250);
			}
 
			function Query() {
				console.log("查询数据");
			}
 
		}
	</script>
 
</html>