第一步,确定用哪个动作。实现输入框实时搜索:
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>