- 首先什么是防抖？（防抖：多次触发 只执行最后一次）

防抖可以比作等电梯，只要有一个人进来，就需要再等一会儿。业务场景有避免登录按钮多次点击的重复提交。

• 防抖就是指☞触发事件后在n秒内函数只执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。说到防抖大家应该会想到节流，两者cp哈哈哈。

• 主要应用场景有：
  1、登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖
  2、调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖
  3、文本编辑器实时保存，当无任何更改操作一秒后进行保存
  防抖实现思路
  

function throttle(fn, delay){
    let timer;
    return function(){
      if (timer) {
        return;
      }
      let _this = this;
      let _arg = arguments;
      timer = setTimeout(function(){
        fn.apply(_this, _arg);
        timer = null;
      }, delay);
    }
  }

• 项目场景

在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。

在日常的开发中，在很多表单的提交过程中，会有保存按钮的多次点击的情况，如果不做处理，会造成数据的多次创建的情况。

方法一：使用vue自定义指令

• Vue项目中使用自定义指令实现按钮防抖功能，防止多次调接口

 在directive.js文件
import Vue from 'vue'
/*
  按钮防抖动指令
*/
Vue.directive('debounce', {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true
        setTimeout(() => {
          el.disabled = false
        }, binding.value || 3 * 1000)
      }
    })
  }
})`

//页面中使用
<template>
  <div>
  	 <el-button v-debounce>防抖</el-button>
  </div>
</template>

<script>
import debounce from '../../directive/test/debounce'
</script>

• 防止多次调接口?

• 1.使用vue自定义指令,规定时间内只会执行一次。

• 2.在提交按钮添加loading，通过loading状态防止多次点击。

• vue自定义指令：https://cn.vuejs.org/v2/guide/custom-directive.html#ad

• 

• 

方法二：vue 使用 lodash 防抖，节流

代码如下：

//1.在项目中安装
npm i --save lodash.debounce

<button @click=“handleClick”>下载按钮</button>

//2.页面使用：使用场景点击按钮调接口，按钮防抖功能
//引入代码
import debounce from 'lodash.debounce'

//在 vue 里面的 created 声明周期或者是 mounted 生命周期中写
mounted() {
    this.debouncedCallback = debounce(function() {
      // 请求后台的代码...
      downLoadInfo({ id: this.rowId }).then(res => {
        if (res.code === 200) {
          this.$message.success(res.message);
          this.dialogTableVisible = false;
        }
      });
    }, 500);
  },
methods:{
   handleClick( row) {
      this.rowId = row.id;
      this.debouncedCallback();
    },
}

lodash：
官网：lodash官网
中文文档：中文文档
防抖 API：防抖API

- 什么是节流？ （节流：规定时间内 只触发一次） - 节流是指连续触发事件但是在n秒钟只执行一次。

节流可以比作过红绿灯，每等一个红灯时间就可以过一批。

主要应用场景：
a、DOM元素的拖拽功能实现
b、射击游戏类
c、计算鼠标移动的距离
d、监听scroll事件
1、鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；
2、监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；
3、浏览器播放事件，每个一秒计算一次进度信息等

节流实现思路：

    // 方式1: 使用时间戳
    function throttle1(fn, wait) {
        let time = 0;
        return function() {
            let _this = this;
            let args = arguments;
            let now = Date.now()
            if(now - time > wait) {
                fn.apply(_this, args);
                time = now;
            }
        }
    }
    
    // 方式2: 使用定时器
    function thorttle2(fn, wait) {
        let timer;
        return function () {
            let _this = this;
            let args = arguments;
            
            if(!timer) {
                timer = setTimeout(function(){
                    timer = null;
                    fn.apply(_this, args)
                }, wait)
            }
        }
    }