使用节流或防抖技术限制按钮点击

本文共计360个文字，预计阅读时间需要2分钟。

原本是使用showLoading的，点击直接转转转花，但是呢，showLoading和+showToast这个方法太突然了，你转了花不能弹toast提示，在某个页面需要提交一次表单和做输入验证，测试说可以点击多次。

本来是用showLoading的，点击直接转菊花，但是呢，showLoading和 showToast这个方法是冲突的，你转了菊花不能弹toast提示，在某个页面需要提交一次表单和做输入验证，测试说可以点击多次

然后想到可以用一个变量判断是否点击了，然后500毫秒后自动回来

写在公共的utils方法里面

// 防止多次点击 function btnClickedFun(self) { self.setData({ btnClicked: true }) setTimeout(() => { self.setData({ btnClicked: false }) }) }

js 代码

Page({ data: { btnClicked: false }, click: function (e) { utils.btnClickedFun(this); // 各种处理代码 if (!form[json.departmentId]) { utils.showToast('请选择所属部门') return } ... // 各种处理代码 utils.showLoading() 开始调接口 }, })

html代码

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

到此这篇关于小程序按钮避免多次调用接口和点击方案实现(不用showLoading)的文章就介绍到这了,更多相关小程序按钮避免多次点击内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！