zoukankan      html  css  js  c++  java
  • uniapp按钮防抖防止重复提交

    电站新增时点击提交按钮,手速快的童鞋会提交多几个电站出来。为了解决这个问题,可以在提交按钮上做个防抖操作,下面直接上代码。

    1.在根目录工具包utils里新建debounce.js文件

    export const Debounce = (fn, wait) => {
        let delay = wait|| 500
        let timer
        return function () {
            let args = arguments;
            if (timer) {
                clearTimeout(timer)
            }
    
            let callNow = !timer
    
            timer = setTimeout(() => {
                timer = null
            }, delay)
    
            if (callNow) fn.apply(this, args)
        }
    }

    2.在add.vue里引用以上debounce.js

    import { Debounce } from '@/utils/debounce.js'

    3.在method添加方法

    formSubmit: Debounce(function(e) {
                    console.log('form发生了submit事件,携带数据为:' + JSON.stringify(e.detail.value))
                    var formdata = e.detail.value
                    formdata["image"] = uni.getStorageSync('uploadImg');
                    this.addStation(formdata)
                },1000),

    4.页面提交按钮

    <template>
        <view class="contn">
            <!-- <page-head :title="ttitle"></page-head> -->
            <form @submit="formSubmit">

            <view class="ssm">
              <button class="logi" form-type="submit">
              <!-- 提交 -->
              <view class="logit">
                {{i18n.SBD_Submit}}
              </view>
              </button>
            </view>

              </form>

        </view>
    </template>                
  • 相关阅读:
    2019 SDN上机第5次作业
    hdu 2553 N皇后问题(递归)
    百练oj 2766 最大子矩阵和
    POJ 1664 放苹果
    POJ 3617 Best Cow Line(贪心)
    HDU 2013 ACM/ICPC Asia Regional Hangzhou Online ------ Zhuge Liang's Mines
    HDU 4712 Hamming Distance (随机算法)
    HDU 1171 Big Event in HDU
    HDU 1085 Holding Bin-Laden Captive!
    HDU 1028 母函数
  • 原文地址:https://www.cnblogs.com/chenyangjava/p/15351621.html
Copyright © 2011-2022 走看看