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

2021-08-25  本文已影响0人  我的小小笔尖

常见思路

思路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服务器或者数据库中处理多次点击
上一篇下一篇

猜你喜欢

热点阅读