js节流防抖应用场景，以及在vue中节流防抖的具体实现

故事背景：

项目有个需求是输入框在输入的时候进行搜索，展示下拉数据，但是没必要输入一个字都进行搜索，所以想到了在输入结束200毫秒后再进行搜索，从而引出来了 js的节流(throttle)，防抖（debounce），在网上想找个现成的用下，但是好多都不对，于是就自己搞了。

先看看概念

函数防抖(debounce)：

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型的案例就是输入搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，就重新计时。

函数节流(throttle)：

规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效； 典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只有一次生效。

setTimeout内 this失效：

这是由于setTimeout函数调用的代码运行在与所在函数完全分离的执行环境上，这会使得this指向的是window对象，看下图 :

打了断点，在Console下输出 this 是Window对象，解决这个问题可以在setTimeout函数外面定义一个 that = this 就可以了，输出 that果然就是该组件的对象

看在vue中的实际代码：

1.输入框，输入最后一个字 2秒后执行（防抖：debounce）：

html:

<input type="text" class="input"  v-model="searchText" @keyup="debounce"/>

js：
        debounce: function(){
            let that = this
            if(timer){
                clearTimeout(timer)
            }
            timer = setTimeout(function () {
                console.log('输入')
                timer = undefined;
            },2000)
        }

timer 不要放在 debounce函数内部，要在文件全局定义，如下所示：

 效果演示如下（输入一次文字2秒后执行，多次输入，还是执行一次，成功）：

 

2.在2秒内多次点击，只有一次生效（节流：throttle）：

html:
 
<div @click="throttle">点我。。</div>

js： 
        throttle: function(){
            let that = this
            let now = +new Date();
            if(lastTime && lastTime - now < 2000){
                clearTimeout(timer)
            }
            timer = setTimeout(function () {
                console.log('点击')
                lastTime = +new Date()
            },200)
        }

　lastTime 跟 timer一样，都要定义在文件的全局，如下：

效果图如下：第一次点击一下输出一次，第二次双击选中，又输出一次，成功。