事件防抖

例如设定间隔时间为 200 毫秒，防抖则是在事件触发后 200 毫秒再执行事件处理器。

假设在这200毫秒内又触发了相同事件，则取消上一次的事件，不执行事件处理器，以最后一次触发事件的时机开始，等待 200 毫秒执行事件处理器。

这种情况常用于键盘输入，如表单验证，关键词联想。

搜索引擎基本都含有关键词联想功能，即在输入关键词的时候，根据关键词联想相关内容，为用户更好的命中搜索结果。

<style>
  input { border: 1px solid #eee; padding: 4px 8px; min-width: 300px; font-size: 14px; height: 40px; display: block; margin: 0 auto; outline: none; }

  .result { text-align: center; }
</style>

<div>
  <input type="text">

  <div class="result"></div>
</div>

<script>
  var input = document.querySelector('input');
  var result = document.querySelector('.result');

  input.addEventListener('input', function(e) {
    var val = e.target.value;

    result.innerText = '联想内容：' + val;
  });
</script>

假设输出的就是服务端返回的联想内容。

其实可以发现，用户在输入关键词的时候，基本是按照词组的方式进行的，在某一个词组输入完成前去获取联想内容其实意义不大。
通过防抖就可以剔除这些无意义的事件触发。

<style>
  input { border: 1px solid #eee; padding: 4px 8px; min-width: 300px; font-size: 14px; height: 40px; display: block; margin: 0 auto; outline: none; }

  .result { text-align: center; }
</style>

<div>
  <input type="text">

  <div class="result"></div>
</div>

<script>
  var input = document.querySelector('input');
  var result = document.querySelector('.result');
  var timer = null;

  input.addEventListener('input', function(e) {
    clearTimeout(timer);

    timer = setTimeout(function() {
      var val = e.target.value;

      result.innerText = '联想内容：' + val;
    }, 300);
  });
    // 通过定时器，来延迟执行事件处理器，每次触发事件，就取消上一次事件处理器
    // 这样就达到了防抖的效果

    // 小结：如果输入框的内容在500毫秒内有持续的输入动作，
    //       就用clearTimeout清除指定的setTimeout定时器中的动作，
    //       使得定时器在500毫秒内无法对div的文本赋值或减少对服务端的请求
</script>