一些优化(即时搜索之函数去抖)

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

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:在键盘松开时触发。(如果用鼠标复制粘贴则不会触发)

总代码:



	
		
		即时搜索小优化
	
	
		
	
	
 

 

 

你可能感兴趣的:(js,input)