作为前端开发,我们经常会遇到的场景,比如用户点击获取验证码按钮时,没有反应,大部分用户都会接着点击,这就会造成用户收到多条验证码,这是因为后台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}}" />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
第一次调用时,激发一次 第二次调用时,会激发两次 等等 编辑: 下面是一个jsfiddle示例(如下所示)。 要复制,请单击按钮,然后单击,然后单击一个并重复此过程 您将注意到,第二次执行该过程时,文本会加倍
问题内容: 我试图用Javascript编写视频扑克游戏,以降低其基础知识,但是我遇到了一个问题,其中jQuery click事件处理程序多次触发。 它们被附加到用于下注的按钮上,并且对于在游戏过程中第一手下注(仅触发一次)非常有效。但是在秒针下注中,每次按下一个下注或下注按钮都会触发两次点击事件(因此,每次按下正确的赌注量是两次)。总体而言,在按一次下注按钮时,触发单击事件的次数遵循此模式序列的
问题内容: 我的页面上有一个超链接。我正在尝试自动执行对超链接的多次单击,以进行测试。有什么方法可以使用JavaScript模拟超链接的50次点击? 我正在寻找JavaScript中的onClick事件触发器。 问题答案: 单击HTML元素: 只需执行。大多数主流浏览器都支持此功能。 要多次重复单击: 将ID添加到元素以唯一地选择它: 并通过for循环在JavaScript代码中调用该方法:
我要在按钮的click事件上向html表中添加一行。在那一行中,我有一个包含li元素的单元格。我已经为li元素分配了click事件。当我点击李的事件被解雇了很多次,我不知道为什么...好心的帮助。
问题内容: 我正在使用以下代码通过AJAX提交表单: 背景 我的PHP处理程序执行各种任务,然后发回响应。然后,我可以在成功或错误函数中执行某些操作。 我的问题 当用户双击表单的“提交”按钮时,将发生两次AJAX调用,这将导致我的PHP处理程序中的代码执行两次。 我的问题 如果用户双击提交,如何避免我的代码执行两次? 问题答案: 当AJAX调用再次出现时,请先禁用首次单击的“提交”按钮,然后重新启
我使用for循环将学生详细信息添加到ArrayList。当我给第二个学生提供详细信息时,它会覆盖第一个数据。螺柱类 将数据添加到ArrayList的主类。 输出:第二个数据[2,2]后的实际输出辊数[1]。预期输出应为卷号: A1姓名: F1 L1性别:男性年龄: 11体育赛事:标枪 报名号:A2姓名:F2 L2性别:女年龄:14体育项目:100米跑 报名号:A3姓名:F3 L3性别:男性年龄:1
我在我的应用程序中使用MutableLiveData进行基于事件的通信。我有单一活动两个片段架构。 在ViewModel的帮助下,我正在使用Fragment-1中的LiveData事件。但是,当我使用菜单栏用Fragment-2替换这个Fragment-1并最终返回Fragment-1时,LiveData的旧值再次被捕获。 如何避免这个问题?非常感谢任何帮助/建议!谢谢你。
问题内容: 如何在 ReactJS中 手动触发click事件?当用户单击element1时,我想自动触发对标签的单击。 问题答案: 您可以使用该道具通过回调获取对基础HTMLInputElement对象的引用,将该引用存储为类属性,然后使用该引用稍后使用HTMLElement.click方法触发事件处理程序中的单击。 在您的方法中: 在事件处理程序中: 完整示例: 请注意 ES6箭头函数,该函数为