背景：在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。
需求：防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。
思路：
-
定义一个延迟执行的方法，如果在延迟时间内再调用该方法，则重新计算执行时间。
-
将时间绑定在 click 方法上。
const debounce = {
inserted: function (el, binding) {
let timer
el.addEventListener('keyup', () => {
if (timer) {
clearTimeout(timer)
timer = setTimeout(() => {
binding.value()
}, 1000)
export default debounce
使用：给 Dom 加上 v-debounce 及回调函数即可
<template>
<button v-debounce="debounceClick">防抖</button>
</template>
<script>
export default {
methods: {
debounceClick () {
console.log('只触发一次')
</script>
说明：需要先注册该指令再使用。
背景：在开发中，有些提交保存按钮有时候会在短时间内被点击多次，这样就会多次重复请求后端接口，造成数据的混乱，比如新增表单的提交按钮，多次点击就会新增多条重复的数据。需求：防止按钮在短时间内被多次点击，使用防抖函数限制规定时间内只能点击一次。思路：定义一个延迟执行的方法，如果在延迟时间内再调用该方法，则重新计算执行时间。将时间绑定在 click 方法上。const debounce = { inserted: function (el, binding) { let timer
npm i vue-debounce
lock ：用于锁定防抖并防止在按下输入键时回车键触发功能示例： v-debounce:400ms.lock="cb"
unlock ：用于解锁去抖动输入上的回车键，如果要使用lock选项并且只希望解锁一些去抖动输入，则很有用
fireonempty ：用于表示清空该特定输入后，您希望该函数立即触发
cancelonempty ：使用它来指定清空输入时，您根本不希望触发去抖动
Vue.directive(‘debounce’, {
inserted(el, binding, vnode) {
el.addEventListener(‘click’, (e) => {
let timeout = 1000;
if(binding.value) {
timeout = binding.value;
const i = document.createElement(‘i’);
i.classLis
debounce是vue1.x版本中数据双向绑定v-model的一个参数，在后来的版本中被舍弃了，因为最初用来控制Ajax请求以及一些高耗任务，它的用法是接受一个数值n，当视图层的数据改变后，延迟n毫秒后，数据层的数据再发生变化。
举个简单的例子，现在我们做一个搜索提示，页面上有一个搜索框，当我们输入信息的时候，下面能显示出来与信息相关的提示。首先将页面上的输入框与数据层的数据进行双向绑定，然后在...
import copy from './js/copy';
import longPress from './js/longPress';
import debounce from './js/debounce';
import inputNumber from './js/inputNumber';
import waterMarker from './js/waterMarker';
import draggable from './js/draggable';
前端做后台管控系统，在某些接口请求时间过长的场景下，需要防止用户反复发起请求。
假设某场景下用户点击查询按钮后，后端响应需要长时间才能返回数据。那么要规避用户返回点击查询按钮无外乎是让用户无法在合理时间内再次点击按钮。实现方式也有好几种：
1、在按钮点击发起请求后，弹个蒙层，显示个loading，等请求数据返回了将蒙层隐藏掉。
2、在按钮点击发起请求后，将按钮禁用掉，同样等数据返回了将按钮禁用解除。
以上是比较常见的2种方案。
实现上最简单的肯定是在需要的页面种在请求前和拿到数据后，单独处理。这种方案优点仅仅是简单，但是每个需要处理的页面都要单独写一串重复的代码，哪
