微信小程序防止重复点击按钮的示例代码

 更新时间:2023年10月25日 11:29:12   作者:西门夜说  
这篇文章主要介绍了微信小程序防止重复点击按钮的示例代码,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

微信小程序防止重复点击按钮

Page({
  data: {
    ......
    isclick: false, //点击防重标志
  },
  /**
   * 需要做防点击防重的单击事件
   */
  onclick: function() {
    var self = this
    if(!self.data.isclick){
      self.setData({
        isclick:true
      })
      setTimeout(function () {
        self.setData({
          isclick: false
        })
      }, 1000);
    }else{
      return;
    }
    ......
  }
   ......
})
//btn_click.js
//点击防重
let isClick=false;
let preventDuplicateClicks=function(){
  if (!isClick) {
    isClick=true    
    setTimeout(function () {
      isClick = false
    }, 1000);
    return false;
  } else {
    return true;
  }
}
module.exports = {
  preventDuplicateClicks: preventDuplicateClicks
}
import btnClick from '../../../../utils/btn_click';
Page({
  ......
  /**
   * 1.需要防重的单击事件
   */
  orderPay: function() {
  onSubmitConfirm(event) {
    let that = this
    if (btnClick.preventDuplicateClicks()) {
      return
    }
    wx.request({
      url: xxxxxxx, //仅为示例,并非真实的接口地址
      method: "POST",
      data: {
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        let data = res.data
        console.log(res)
        wx.showToast({
          title: data.message,
          icon: 'success',
          duration: 2000,
        })
      },
      fail(res) {
        let data = res.data
        wx.showToast({
          title: data.message,
          icon: 'none',
          duration: 2000
        })
      },
      // 不论失败与否都会执行下面这个函数
      complete: () => {
        that.onSubmitCancel()
      }
    })
  },
})

到此这篇关于微信小程序防止重复点击按钮的文章就介绍到这了,更多相关小程序防止重复点击内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • uniapp实现app自动更新详细步骤

    uniapp实现app自动更新详细步骤

    这篇文章主要给大家介绍了关于uniapp实现app自动更新的详细步骤,文中给出了详细的代码示例以及图文教程,对大家学习或者使用uniapp具有一定的参考学习价值,需要的朋友可以参考下
    2023-08-08
  • JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)

    JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)

    这篇文章主要介绍了JS简单获取当前日期时间的方法,涉及javascript针对当前日期时间的简单运算操作,需要的朋友可以参考下
    2017-03-03
  • JavaScript实现音乐导航效果

    JavaScript实现音乐导航效果

    这篇文章主要为大家详细介绍了JavaScript实现音乐导航效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • koa2服务端使用jwt进行鉴权及路由权限分发的流程分析

    koa2服务端使用jwt进行鉴权及路由权限分发的流程分析

    这篇文章主要介绍了koa2服务端使用jwt进行鉴权及路由权限分发 ,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • js实现拖动滑块效果

    js实现拖动滑块效果

    这篇文章主要为大家详细介绍了js实现拖动滑块效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • js实现贪吃蛇游戏含注释

    js实现贪吃蛇游戏含注释

    这篇文章主要为大家详细介绍了js实现贪吃蛇游戏含注释,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • IE中图片的onload事件无效问题和解决方法

    IE中图片的onload事件无效问题和解决方法

    这篇文章主要介绍了IE中图片的onload事件无效问题和解决方法,这是一个很经典的问题,其实只需要调换一下代码顺序即可解决,需要的朋友可以参考下
    2014-06-06
  • JavaScript实现将数组数据添加到Select下拉框的方法

    JavaScript实现将数组数据添加到Select下拉框的方法

    这篇文章主要介绍了JavaScript实现将数组数据添加到Select下拉框的方法,涉及javascript数组操作及页面元素动态赋值的相关技巧,需要的朋友可以参考下
    2015-08-08
  • uni-app自定义组件和通信的方式

    uni-app自定义组件和通信的方式

    组件是 vue 技术中非常重要的部分,组件使得与ui相关的轮子可以方便的制造和共享,进而使得vue使用者的开发效率大幅提升,组件可以使用全局注册和页面引入两种方式进行使用,对uni-app自定义组件和通信相关知识感兴趣的朋友跟随小编一起看看吧
    2024-03-03
  • 多选列表框动态添加,移动,删除,全选等操作的简单实例

    多选列表框动态添加,移动,删除,全选等操作的简单实例

    本篇文章主要是对多选列表框动态添加,移动,删除,全选等操作的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01

最新评论