lodash 实现防抖和节流

1. 什么是防抖和节流

• 正常情况下，当函数触发频率高时，每触发一次函数，就会触发回调，如果函数中有计算量较大的情况，浏览器就会出现卡顿现象。
• 防抖：前面所有的触发都会取消，最后一次的执行在规定的时间之后才会触发 频繁触 => 只执行一次 （回调是最后一次触发的回调）
• 节流：在规定的时间间隔范围内，不会触发多次回调，只有大于这个时间才会触发回调。频繁触发 => 少量触发 （回调是第一次触发的回调）

2. 如何通过 lodash库 实现防抖和节流

使用步骤如下

1. 下载 lodash 到项目中

npm i --save lodash

2. 引入 lodash

import _ from "lodash";

3. 实现防抖

<template>
 <div>
  <button @click="callNumber">点击</button>
 </div>
</template>
 
<script>
import _ from "lodash";
 export default {
   methods: {
    // 使用  _.debounce 调用防抖函数 参数一为函数(可以接收参数), 参数二为防抖时间设置
    callNumber: _.debounce(function(phone) {
      let requestData = {};
      this.$request(
        "post",
        url,
        requestData,
        (data2) => {},
        (errormessage2) => {}
      );
    }, 2000),
   }    
   }    
 }
</script>

4. 实现节流

<template>
 <div>
  <button @click="callNumber">点击</button>
 </div>
</template>
 
<script>
import _ from "lodash";
 export default {
   methods: {
   // 使用 _.throttle 调用节流函数 参数一为函数(可以接收参数), 参数二为节流时间设置
    callNumber: _.throttle(function(phone) {
      let requestData = {};
      this.$request(
        "post",
        url,
        requestData,
        (data2) => {},
        (errormessage2) => {}
      );
    }, 2000),
   }    
 }
</script>