vue里使用lodash进行防抖和节流操作

节流（throttle）: 创建一个节流函数，在等待时间内最多执行 一次的函数

防抖（debounce）函数：一个需要频繁触发的函数，在规定时间内只让最后一次生效，前面的不生效

安装

可以通过 yarn 或 npm 安装 lodash。

# Yarn
$ yarn add lodash
# NPM
$ npm install lodash --save

注意：如果我们不想导入lodash的所有内容，而只导入所需的部分，则可以通过一些Webpack构建自定义来解决问题。 还可以使用lodash.throttle和lodash.debounce等软件包分别安装和导入lodash的各个部分。

使用

<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>

特别说明：

1. 在给防抖或者节流函数传递执行函数时，一定要注意this的指向问题。

2. onclick调用方法时，不能写成throttleFun(){ ...funHelper.debounce() }