如何实现dobounce搜索

概述

有这么个场景，有一个输入框，在输入时，需要根据关键字搜索出符合条件的前十条数据，你会怎么做。give you ten seconds
一般情况下，大家应该会绑定input，直接监听input即可。这不失为最简答的方法，但是，这会实时，每一次值的改变都会去请求数据，比如，我们要输入“南京”去搜索相关的信息，但是当输入“南”时就会去请求数据，很显然请求回来的数据并不会满足我们的要求，并且会在输入完南京之前去多请求一次数据，此时就需要debounce出现了。

debounce

字面意思是防抖动，此处理解成文字没输完，是不会去请求数据的

实现思路

可以这么来实现非实时请求数据。首先必须监听input，这会在input值变化时被触发，另外，此处肯定会需要延时执行，所以还需要有一个setTimeout，大致代码可能如下

 var txtKeyword = document.querySelector('#txtKeyword')
  var timeout = null
  txtKeyword.addEventListener('input', function() {
    timeout = setTimeout(() => {
        console.log(this.value)
    }, 800)
  })

这貌似达到了延时的目的，但是很明显这是有问题的，那就是，每一次input都会去执行setTimeout,都会将setTimeout加入堆栈，最后的效果如下

Paste_Image.png

具体要去执行，大家如果有疑问可以把上面的代码拿到浏览器中去执行一下
怎么去解决这个问题呢，其实只需要每次input时，把上一次的setTimeout清除即可，添加这么一句：

timeout&&clearTimeout(timeout)

这样就能完美解决了，再看看执行效果

Paste_Image.png

没有修改一位就去执行了吧，而且没有一段同样的一段value执行多次了吧，完整代码，请猛戳这里

注：在手机上体验了以下，ios8不支持箭头函数，不支持filter,所以改成了es5的写法，如果有babel环境或者高级的浏览器，可以直接执行注释的es6的代码