微信小程序> 支付宝小程序中防止快速点击提交按钮

支付宝小程序中防止快速点击提交按钮

浏览量:3495 时间: 来源:console.log( )

在写小程序提交表单的时候,快速点击提交按钮会提交多次,想到要使用‘防抖’(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);}

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

>传送门<

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎