美文网首页Vue.js1024Vue.js专区
43.Vue中使用Lodash 节流(throttle)和防抖(

43.Vue中使用Lodash 节流(throttle)和防抖(

作者: 圆梦人生 | 来源:发表于2019-05-27 17:45 被阅读2次

    1、节流(throttle): 创建一个节流函数,在等待时间内最多执行 一次的函数
    2、防抖(debounce):创建一个 debounced(防抖动)函数,该函数会从上一次被调用后,延迟多少时间后调用方法,如果不停执行函数,执行时间被覆盖

    案例

    <template>
      <div>
       <button @click="throttleFun">点击按钮(节流)</button> <br/><br/>
       <input type="text" @keyup="debounceFun" /> <br/><br/>
      </div>
    </template>
    <script>
    // 导入lodash 函数function段
    import funHelper from 'lodash/function'
    
    export default {
      methods: {
        // 防抖(延迟多少时间调用,如果一直keyup则会覆盖之前的时间重新计算)
        debounceFun: funHelper.debounce((e)=>{
          console.log(e.target.value);
        }, 2000),
        // 2秒内调用一次
        throttleFun: funHelper.throttle(()=>{
         console.log('2秒内只能调用一次!');
         }, 2000),
         //
         throttleFun2(){
           console.log('3秒内调用一次');
         },
         initFun(){
           // 定义节流函数
           let throttleF = funHelper.throttle(this.throttleFun2, 3000)
           // 循环调用
           for(let i=0;i<10;i++){
             throttleF();
           }
         }
      },
      created(){
        this.initFun();
      }
    }
    </script>
    

    lodash中文文档

    相关文章

      网友评论

        本文标题:43.Vue中使用Lodash 节流(throttle)和防抖(

        本文链接:https://www.haomeiwen.com/subject/rrtktctx.html