前端解决按钮重复提交数据问题（节流和防抖）

🍿★,°:.☆(￣▽￣)/$:.°★ 🍿🍟欢迎来到前端初见的博文，本文主要讲解在工作解决按钮重复提交数据问题（节流和防抖）👨‍🔧 个人主页 : 前端初见🥞喜欢的朋友可以关注一下，下次更新不迷路🥞

文章目录

一、问题

当我们在页面进行点点点的操作时，很可能遇到点击两次的行为，这时候提交或保存按钮也没有进行校验，很可能保存两份数据，因此，作为开发人员，对需要保存类似的按钮进行校验很有必要。

二、 解决方案(通过节流防抖解决)

场景:解决按钮多次点击重复提交数据问题
防抖方法(debounce.js)

let timeout =null/**
 * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
 *
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */functiondebounce(func, wait =500, immediate =false){// 清除定时器if(timeout !==null)clearTimeout(timeout)// 立即执行，此类情况一般用不到if(immediate){const callNow =!timeout
        timeout =setTimeout(()=>{
            timeout =null}, wait)if(callNow)typeof func ==='function'&&func()}else{// 设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
        timeout =setTimeout(()=>{typeof func ==='function'&&func()}, wait)}}exportdefault debounce

节流方法(throttle.js)

let timer;let
    flag
/**
 * 节流原理：在一定时间内，只能触发一次
 *
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */functionthrottle(func, wait =500, immediate =true){if(immediate){if(!flag){
            flag =true// 如果是立即执行，则在wait毫秒内开始时执行typeof func ==='function'&&func()
            timer =setTimeout(()=>{
                flag =false}, wait)}}elseif(!flag){
        flag =true// 如果是非立即执行，则在wait毫秒内的结束处执行
        timer =setTimeout(()=>{
            flag =falsetypeof func ==='function'&&func()}, wait)}}exportdefault throttle

在mian.js进行挂载使

// 防抖方法import debounce from'./plugins/debounce'// 节流方法import throttle from'./plugins/throttle'const $u ={
  debounce,
  throttle
}// 挂载节流防抖到原型Vue.prototype.$u = $u

组件中使用

<el-buttonicon="iconfont icon-save-line"type="primary"@click="$u.throttle(() => getAllData(), 1000)">保存
</el-button><!-- getAllData 按钮触发方法   1000时间 -->

总结

如果这篇【文章】有帮助到你💖，希望可以给我点个赞👍，创作不易，如果有对前端端或者对python感兴趣的朋友,请多多关注💖💖💖，咱们一起探讨和努力！！！
👨‍🔧 个人主页 : 前端初见