微信小程序:防止重复提交产生垃圾数据,频繁点击消耗数据库读写资源

常见思路

思路1. 前端:不允许二次或多次点击

例如使用:wx.showToast,wx.showLoading
弹出提示框,提示框显示xx秒,提示框显示期间无法再操作
通俗讲,就是弹出屏蔽层,防止用户第二次点击

例如使用:hidden 或者 disable 或者 wx:if
点击一次后,立即禁用或隐藏按钮

此方法可能存在的问题:在弹出提示框前已经点击了多次

思路2. 前端:二次点击或多次点击视为一次点击
utils.js中定义节流函数
/**
 * 节流:在一定时间内连续触发某事件,在这段时间段内只执行首次触发的那一次。
 * 
 * @param func 需要节流的函数
 * @param timeGap 时间
 */
module.exports = {
  throttleFunc: function throttleFunc(func, timeGap) {    
    if (timeGap==null || typeof(timeGap)=="undefined") {
      timeGap = 2000 // 如果没有传递参数timeGap,或者该参数值为空,则使用默认值2000毫秒
    }
    let lastTime = null
    return function () {
      let currentTime = + new Date()
      if (currentTime - lastTime > timeGap || !lastTime) {
        console.log('exec', currentTime) // 正式环境可去掉
        func.apply(this, arguments)
        lastTime = currentTime
      }else {
        console.log('no exec') // 正式环境可去掉
      }
    }
  },
}
page.js

页面js中使用节流函数

// 引入节流函数所在js文件
var utilsJs = require("../../utils.js")

  // 页面按钮点击事件使用节流函数
  saveData: utilsJs.throttleFunc(function(e) {
    // 事件内部代码省略...
  }, 2000),
代码亲测有效
思路3. 后端:web服务器或者数据库中处理多次点击
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容