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

这篇具有很好参考价值的文章主要介绍了前端解决按钮重复提交数据问题（节流和防抖）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

一、问题

当我们在页面进行点点点的操作时，很可能遇到点击两次的行为，这时候提交或保存按钮也没有进行校验，很可能保存两份数据，因此，作为开发人员，对需要保存类似的按钮进行校验很有必要。
前端解决按钮重复提交数据问题（节流和防抖）

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

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

let timeout = null

/**
 * 防抖原理：一定时间内，只有最后一次操作，再过wait毫秒后才执行函数
 *
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 * @return null
 */
function debounce(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)
    }
}

export default debounce

节流方法(throttle.js)

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

在mian.js进行挂载使

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

组件中使用

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