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

 更新时间: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()
      }
    })
  },
})

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

相关文章

  • 微信小程序开发实现首页弹框活动引导功能

    微信小程序开发实现首页弹框活动引导功能

    自己x实现的一个比较简单微信弹窗功能,主要就是教会大家对微信弹窗的用法和理解,这篇文章主要给大家介绍了关于微信小程序如何实现首页弹框活动引导功能的相关资料,需要的朋友可以参考下
    2021-08-08
  • JavaScript 新手24条实用建议[TUTS+]

    JavaScript 新手24条实用建议[TUTS+]

    本文列出了24条能让你的代码编写过程更为轻松高效的建议。也许您还是JavaScript初学者,刚刚写完自己的Hello World,那这里有很多对您的工作将十分有用的小贴士;也许有些技巧您已经知道,那就试试快速浏览一下,看能不能发现一点新东西吧!
    2009-06-06
  • 使用text方法获取Html元素文本信息示例

    使用text方法获取Html元素文本信息示例

    获取文本信息的方法有很多,本例使用的使用的是jquery的text方法,并使用alert将文本弹出,下面是实现代码
    2014-09-09
  • laypage+SpringMVC实现后端分页

    laypage+SpringMVC实现后端分页

    这篇文章主要为大家详细介绍了laypage+SpringMVC实现后端分页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • JavaScript数组操作函数汇总

    JavaScript数组操作函数汇总

    这篇文章主要针对JavaScript数组操作函数push,pop,join,shift,unshift,slice,splice,concat进行总结,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • uniapp小程序自定义tabbar以及初次加载闪屏解决方法

    uniapp小程序自定义tabbar以及初次加载闪屏解决方法

    Uniapp小程序可以通过自定义tabbar来实现更加个性化的界面设计,下面这篇文章主要给大家介绍了关于uniapp小程序自定义tabbar以及初次加载闪屏解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • 详解微信小程序canvas圆角矩形的绘制的方法

    详解微信小程序canvas圆角矩形的绘制的方法

    这篇文章主要介绍了详解微信小程序canvas圆角矩形的绘制的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • JS中style属性

    JS中style属性

    JS中style属性...
    2006-10-10
  • javascript实现的简单计时器

    javascript实现的简单计时器

    计时器提供了一 个可以将代码片段异步延时执行的能力,javascript生来是单线程的(在一定时间范围内仅一部分js代码能运行),计时器为我们提供了一种避开这种 限制的方法,从而开辟了另一条执行代码的蹊径。
    2015-07-07
  • JavaScript实现带播放列表的音乐播放器实例分享

    JavaScript实现带播放列表的音乐播放器实例分享

    这篇文章主要介绍了JavaScript实现带播放列表的音乐播放器实例分享,包括对播放完歌单之后没有将要播放的歌曲的提示功能,需要的朋友可以参考下
    2016-03-03

最新评论