vue防止重复提交数据-防抖功能

首先明确下我们想要实现的效果。

1.用户在按下按钮的时候立即触发点击事件。
2.用户在快速连续按下按钮的时候只触发第一次的点击事件。
3.用户不间断疯狂点击按钮（暴力测试），也只是立即触发第一次的事件，在疯狂点击的过程中不会触发事件，即使超时时间已经过去。

解决方案 lodash，这里不展开分析这个库，只用这个库来实现防重复点击的需求。
不多说直接上代码吧

官网地址奉上 ：lodash.debounce | Lodash 中文文档 | Lodash 中文网 (lodashjs.com)

安装lodash

npm i --save lodash

组件中引入

import _ from "lodash"

官方也是习惯将这个库命名为下划线，是不是很与众不同，可能是为了防重名吧，这里不多探讨。

vue组件完整实现

<template>
    <div>
        <div @click="handleClick" style="width: 100px;height: 100px;background-color: yellow;">快速连续点击</div>
    </div>
</template>

<script>
    import _ from "lodash"
    export default {
        methods: {
            handleClick:_.debounce(function() {
                //你的业务逻辑
                console.log('执行业务逻辑1 ' + Math.random())
            }, 1000, {
                'leading': true, //在延迟开始前立即调用事件
                'trailing': false, //在延时结束后不调用,保证事件只被触发一次
            })
        }
    }
</script>
<style>
</style>

亲测有效！

标签：触发,防抖,vue,lodash,debounce,点击,事件,提交,按钮
来源： https://www.cnblogs.com/netcore-vue/p/16434523.html