JS-[消抖]

JS-消抖

• 引入
• debounce消抖

引入

• 向文本框输入内容，在输入的同时(input事件)从服务器数据库检索出相似词并展示在下面的ul中，若每输入一个字母都去检索，会增加服务器负担，所以可以采用消抖处理
• 类似input，scroll，resize等触发极多的事件，每触发一次就执行相应事件处理代码，称为抖动
• 消抖就是减少事件触发，又能确保功能的完整

<input type="text" id="textBox" />
<ul id="textBoxAlt"></ul>

debounce消抖

例如：input事件触发后，等待500ms，若用户未输入，则运行处理代码，否则重置等待事件

var db=['tom','sam','lisa','aili','lina'];  //模拟数据库

$("#textBox").on("input",function(){
  debounce(getText,500);  //调用消抖函数，等待时间为500ms
});

function getText(){
  $("#textBoxAlt").empty();  //清空
  for(var i=0;i<db.length;i++){
    var text=$("#textBox").val();
    if(db[i].indexOf(text)==0 && text!=""){  //遍历
      var li=document.createElement("li");  //创建节点
      li.innerText=db[i];  //设置节点内容
      $("#textBoxAlt").append(li);  //添加相似词
    }
  }
}

function debounce(method,delay){
  clearTimeout(method.debounceTimeout);
  method.debounceTimeout=setTimeout(function(){
    method();
  },delay);
}