小程序按鈕避免多次調(diào)用接口和點(diǎn)擊方案實(shí)現(xiàn)(不用showLoading)

更新時(shí)間：2020年04月15日 14:13:34 作者：早飯君

這篇文章主要介紹了小程序按鈕避免多次調(diào)用接口和點(diǎn)擊方案實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

本來(lái)是用showLoading的，點(diǎn)擊直接轉(zhuǎn)菊花，但是呢，showLoading和 showToast這個(gè)方法是沖突的，你轉(zhuǎn)了菊花不能彈toast提示，在某個(gè)頁(yè)面需要提交一次表單和做輸入驗(yàn)證，測(cè)試說(shuō)可以點(diǎn)擊多次

然后想到可以用一個(gè)變量判斷是否點(diǎn)擊了，然后500毫秒后自動(dòng)回來(lái)

寫在公共的utils方法里面

// 防止多次點(diǎn)擊
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('請(qǐng)選擇所屬部門')
    return
  }
  ...
  // 各種處理代碼
  
  utils.showLoading()
  
  開(kāi)始調(diào)接口
  

 },
})

html代碼

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

到此這篇關(guān)于小程序按鈕避免多次調(diào)用接口和點(diǎn)擊方案實(shí)現(xiàn)(不用showLoading)的文章就介紹到這了,更多相關(guān)小程序按鈕避免多次點(diǎn)擊內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格(DEMO詳解)
這篇文章主要介紹了BootStrap實(shí)現(xiàn)帶有增刪改查功能的表格，表格封裝了3個(gè)版本，接下來(lái)通過(guò)本文給大家展示下樣式及代碼，對(duì)bootstrap增刪改查相關(guān)知識(shí)感興趣的朋友一起通過(guò)本文學(xué)習(xí)吧
2016-10-10
js根據(jù)鼠標(biāo)移動(dòng)速度背景圖片自動(dòng)旋轉(zhuǎn)的方法
這篇文章主要介紹了js根據(jù)鼠標(biāo)移動(dòng)速度背景圖片自動(dòng)旋轉(zhuǎn)的方法,實(shí)例分析了javascript操作鼠標(biāo)與圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-02-02
擴(kuò)展JS Date對(duì)象時(shí)間格式化功能的小例子
這篇文章主要介紹了擴(kuò)展JS Date對(duì)象時(shí)間格式化功能，有需要的朋友可以參考一下
2013-12-12
基于Bootstrap實(shí)現(xiàn)城市三級(jí)聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了基于BootStrap實(shí)現(xiàn)城市三級(jí)聯(lián)動(dòng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
原生javascript實(shí)現(xiàn)簡(jiǎn)單的datagrid數(shù)據(jù)表格
這篇文章主要介紹了原生javascript實(shí)現(xiàn)簡(jiǎn)單的datagrid數(shù)據(jù)表格的方法，效果十分棒,需要的朋友可以參考下
2015-01-01
JavaScript知識(shí)點(diǎn)總結(jié)(十六)之Javascript閉包（Closure）代碼詳解
閉包是可以包含自由（未綁定）變量的代碼塊；這些變量不是在這個(gè)代碼塊或者任何全局上下文中定義的，而是在定義代碼塊的環(huán)境中定義。本文主要介紹了javascript中的閉包,感興趣的朋友一起看看吧
2016-05-05
微信小程序?qū)崿F(xiàn)的涂鴉功能示例【附源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的涂鴉功能,涉及微信小程序事件響應(yīng)及畫筆的相關(guān)操作技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下
2018-01-01
原生JavaScript創(chuàng)建不可變對(duì)象的方法簡(jiǎn)單示例
這篇文章主要介紹了原生JavaScript創(chuàng)建不可變對(duì)象的方法,結(jié)合簡(jiǎn)單實(shí)例形式分析了基于原生JavaScript創(chuàng)建不可變對(duì)象的相關(guān)原理、實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
js?indexOf?的正確用法示例詳解
indexOf()?方法可返回某個(gè)指定的字符串值在字符串中首次出現(xiàn)的位置，這篇文章主要介紹了js?indexOf?的正確用法,需要的朋友可以參考下
2023-02-02
微信小程序云開(kāi)發(fā)之使用云存儲(chǔ)
這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)之使用云存儲(chǔ)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05