防抖与节流(借用第三方插件lodash)

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

lodash插件：

安装：npm i --save lodash
引用：

var debounce = require('lodash/debounce');
import throttle from 'lodash/throttle'

可参考官网：https://www.lodashjs.com/
Lodash 简介 | Lodash 中文文档 | Lodash 中文网

        lodash向外暴露的是_.+函数名()

        防抖: _.debounce(fn,waitTime,option)
lodash.debounce | Lodash 中文文档 | Lodash 中文网

        节流: _.throttle(fn,waitTime,option)
lodash.throttle | Lodash 中文文档 | Lodash 中文网

举个栗子：

<template>
 <div>
  <button @click="aaa()">点击</button>
  <button @click="bbb()">打印</button>
 </div>
</template>

<script>
var debounce = require('lodash/debounce');    //两种引用均可，官网有更多引用可参考
import throttle from 'lodash/throttle'

 export default {
   methods: {
    aaa:debounce(function(){this.matte()},2000),    //防抖
    bbb:throttle(function(){this.matte()},2000,{'trailing': false}),    //节流
    //{ 'trailing': false }节流定时结束后会再次调用函数，这里关闭
    matte(){
      console.log('1111');
    }
   }    
 }
</script>

主页有原生防抖和节流的方法，可供参考 

（如有帮助，点赞加关注，追码不迷路）