43.Vue中使用Lodash 节流（throttle）和防抖（debounce）函数

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(()=>{
    throttleFun: funHelper.throttle(function(){
      // 如果使用()=> 箭头函数 this指向根实例，使用普通函数function()不改变this指向本组件
      console.log(this); 
      console.log('2秒内只能调用一次!');
     }, 2000, { 'trailing': false }),
     //
     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中文文档