首先什么是防抖？
防抖就是指☞触发事件后在n秒内函数只执行一次，如果在n秒内又触发了事件，则会重新计算函数执行时间。说到防抖大家应该会想到节流，两者cp哈哈哈。
主要应用场景有：
a、scroll事件滚动触发，
b、搜索框输入查询
c、表单验证
d、按钮提交事件
e、浏览器窗口缩放，resize事件
什么是节流？
节流是指连续触发事件但是在n秒钟只执行一次。
主要应用场景：
a、DOM元素的拖拽功能实现
b、射击游戏类
c、计算鼠标移动的距离
d、监听scroll事件
function throttle(fn, delay){let timer;return function(){if (timer) {return;}let me = this;let _arg = arguments;timer = setTimeout(function(){fn.apply(me, _arg);timer = null;}, delay);}}
项目场景
在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。
在日常的开发中，在很多表单的提交过程中，会有保存按钮的多次点击的情况，如果不做处理，会造成数据的多次创建的情况。
Vue项目中使用自定义指令实现按钮防抖功能，防止多次调接口
在directive.js文件import Vue from 'vue'/*按钮防抖动指令*/Vue.directive('debounce', {inserted(el, binding) {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {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自定义指令：/v2/guide/custom-directive.html#ad
