vue使用防抖按钮提交

最新推荐文章于 2024-06-27 11:58:42 发布

Ethan-Wu

最新推荐文章于 2024-06-27 11:58:42 发布

阅读量720

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_48329823/article/details/126407094

版权

防抖函数 Vue组件数据提交性能优化 JavaScript

关键词由CSDN通过智能技术生成

1、首先新建一个debounce.js文件

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

2、导入到组件中使用

放在哪里就从哪里导入路劲改一下就可以

import debounce from './debounce.js'

3、在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'
                    });
                }
            },
        },