Vue uses anti-shake button to submit

1. First create a new debounce.js file

// 防抖函数
let timeout = null
function debounce(fn, wait) {
    if (timeout !== null) clearTimeout(timeout)
    timeout = setTimeout(fn, wait)
}
export default debounce

 2. Import it into the component and use it

        It can be imported from wherever it is placed, and the road strength can be changed.

import debounce from './debounce.js'

3. Use in methods

methods: {
            // 提交数据  这个函数是点击的函数
            save(type, val) {
                this.saveType = type
                this.saveVal = val
            //调用防抖函数
                this.debounceFn()
            },

            debounceFn(){
                //使用导入的防抖函数
                debounce(() => {
                    this.postCustomerDataFn(this.saveType, this.saveVal)
                }, 500)
            },

            //这是业务逻辑可以不用看  换成自己的业务逻辑即可
            async postCustomerDataFn(type, val) {
                let res = await postCustomerData({
                    data_analysis: val.content1,
                    problem_diagnosis: val.content2,
                    optimization_suggestions: val.content3,
                    type: type,
                })
                if (res.code == 200) {
                    this.$message({
                        message: res.msg,
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: res.msg,
                        type: 'error'
                    });
                }
            },
        },

Guess you like

Origin blog.csdn.net/weixin_48329823/article/details/126407094