Vue.js1024Vue.js专区

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

2019-05-27  本文已影响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中文文档

上一篇下一篇

猜你喜欢

热点阅读