防抖节流

使用场景：

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

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

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

• 实现代码

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

html:

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

js：

      debounce: function(){
            let that = this
      //定时器中的变量定义，会在每次执行函数的时候重复定义变量，产生严重的内存泄漏
            if(timer){  //timer在全局中定义
                clearTimeout(timer)
            }
            timer = setTimeout(function () {
                console.log('输入')
                timer = undefined;
            },2000)
        }

 

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

html:  

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

 
js：

    throttle: function(){
        let that = this
        let now = +new Date();
        if(lastTime && lastTime - now < 2000){  //lastTime跟timer在全局定义
            clearTimeout(timer)
        }
        timer = setTimeout(function () {
            console.log('点击')
            lastTime = +new Date()
        },200)
    }

作者：Mandy_Huang
链接：https://www.jianshu.com/p/e7f396a5fd7c
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。