zoukankan      html  css  js  c++  java
  • 支付宝小程序中防止快速点击提交按钮

    在写小程序提交表单的时候,快速点击提交按钮会提交多次,想到要使用‘防抖’(debounce) 和 ‘节流’(throttling),这两个具体的概念用法在网上都可以查到,这篇文章分享的是我在小程序中,根据原理简单的实现多次点击只能提交一次

    大致原理:有一个起始时间starttime,点击按钮会记录一个时间为lasttime,time为lasttime-starttime,当点击第一次以后程序运行,计时器结束时会将起始时间更新为本次点击的时间,快速点击时,时间间隔time变短,低于一定时间不会做出反应,只有时间差大于指定时间才能够去执行函数

    data中设置下面三个值
          starttime:0,
          lasttime:'',
          time:1002     
    click(){
        //小程序中获取时间戳的方法
          my.getServerTime({
            success: (res) => {
              this.setData({
                lasttime:res.time,
              })
            },
          });
          var timer=setTimeout(()=>{
              
              this.setData({
                time:this.data.lasttime-this.data.starttime
              })
              
              if(this.data.time>1000){
                console.log(this.data.time)
                this.Request()//要执行的函数
                clearTimeout(timer);
                timer=null;
              
              }
              this.setData({
                starttime:this.data.lasttime
              })
            },500);
    }

    这只是在单个页面中实现,想要在多个页面中引入,我们可以写个公共函数,具体写法参考一下别人的吧

    >传送门<

    编程五分钟,调试两小时...
  • 相关阅读:
    强大的晶体管
    FPGA--数字芯片之母
    方波中的毛刺
    运放,运放
    解决标准FPGA资源丰富却浪费的问题
    国产FPGA市场分析 该如何破局
    流行的FPGA的上电复位
    Git 学习笔记
    日志格式的配置
    Shiro 笔记
  • 原文地址:https://www.cnblogs.com/kingjordan/p/12027001.html
Copyright © 2011-2022 走看看