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

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

作者: 我的小小笔尖 | 来源:发表于2021-08-25 16:23 被阅读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服务器或者数据库中处理多次点击

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/klmjiltx.html