小程序如何避免多次点击,重复触发事件

作为前端开发,我们经常会遇到的场景,比如用户点击获取验证码按钮时,没有反应,大部分用户都会接着点击,这就会造成用户收到多条验证码,这是因为后台api请求比较慢,而客户端体验又做得不到位,导致用户以为没点击到或者是页面假死,在上次请求还没处理完,就再次点击按钮。这对于我们开发来说,这是bug。

如何解决或避免这个问题呢?一般来说有两种情况。

1、点击事件是执行网络请求(提交评论,验证码,支付)
这种情况下可以在请求执行之前显示一个模式的加载框,请求完成后再关闭加载框。
,由于小程序在1.1.0版本基础库才支持wx.showLoading,因此需要对低版本做兼容处理,代码如下:

 function showLoading(message) {
  if (wx.showLoading) {
    // 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理
    wx.showLoading({
      title: message,
      mask: true
    });
  } else {
    // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
    wx.showToast({
      title: message,
      icon: 'loading',
      mask: true,
      duration: 20000
    });
  }
}

function hideLoading() {
  if (wx.hideLoading) {
    // 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理
    wx.hideLoading();
  } else {
    wx.hideToast();
  }
}

我们可以将显示加载框和关闭加载框的代码放在公共的代码里面比如util,然后在使用时直接调用即可。

function request() {
  util.showLoading('加载中...');
  wx.request({
    url: app.globalData.host + 'xxx',
    data: {...},
    method: 'GET',
    success: function (res) {
      util.hideLoading()
      ...
    },
    fail: function (res) {
      util.hideLoading()
      ...
    }
  })
}

2、点击事件是页面跳转
当点击事件需要页面跳转时,不太适合显示加载框,但小程序的页面跳转并不是很快,如果不作处理又会导致用户反复点击打开多个页面,这里可以使用限制按钮或控件的点击间隔的方式处理,同样可以将这个方法放到公共的代码里面比如util,然后在使用时直接调用即可。

function buttonClicked(self) {
  self.setData({
    buttonClicked: true
  })
  setTimeout(function () {
    self.setData({
      buttonClicked: false
    })
  }, 500)
}

首先需要在页面对应的js文件里面增加一个buttonClicked数据对象,然后在点击事件里面调用上述方法。

Page({
  data: {
    buttonClicked: false
  },
  click: function (e) {
    util.buttonClicked(this);
    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../detail/detail?id=' + id
    })
  },
})

另外,在wxml的点击控件中通过buttonClicked判断是否可以点击,可以用bindtap也可以用disabled

<view bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="{{!buttonClicked?'click':''}}" data-id="{{id}}" />
<button bindtap="click" disabled="buttonClicked" data-id="{{id}}" />

 

  • 6
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
微信小程序中,使用wx.getLocation可以获取用户的地理位置信息。但是,对于wx.getLocation的重复调用需要注意一些问题。 首先,频繁调用wx.getLocation可能导致用户体验下降。因为每次调用wx.getLocation都需要用户授权,并且在一些设备上获取地理位置可能需要较长的时间。因此,如果在短时间内多次调用wx.getLocation,用户可能会感到繁琐和不满。 其次,在代码中重复调用wx.getLocation可能会带来一些逻辑上的混乱。例如,在一个页面中,如果重复调用wx.getLocation来获取用户位置,可能会导致获取到的位置信息被覆盖或者混乱,而无法正确处理。 为了避免重复调用wx.getLocation带来的问题,可以采取以下的措施: 1. 在获取到位置信息后,将其存储在一个合适的变量中,以便之后的使用。这样可以避免重复调用wx.getLocation而导致的延迟和用户体验问题。 2. 通过适当的条件判断,避免重复调用wx.getLocation。例如,可以在用户第一次访问页面时调用wx.getLocation获取位置信息,并在之后的访问中直接使用之前获取的位置信息。 3. 如果需要在某些特定的情况下更新位置信息,可以通过用户交互来触发wx.getLocation的调用,而不是在每次页面加载时都去获取。 总之,对于wx.getLocation的重复调用,开发者需要综合考虑用户体验和业务逻辑的需求,避免频繁调用wx.getLocation,同时合理利用已获取的位置信息,以提升小程序的性能和用户满意度。
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值