詳解關于微信setData回調(diào)函數(shù)中的坑
更新時間：2019年02月18日 09:08:52 作者：覓碼君
這篇文章主要介紹了詳解關于微信setData回調(diào)函數(shù)中的坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
最近在做錄音功能，需求大體是這樣的：點擊開始錄音按鈕，頁面狀態(tài)變?yōu)殇浺糁校缓箝_始錄音。
不過偉大的測試同學發(fā)現(xiàn)了一個問題：當快速的連續(xù)點擊開始錄音按鈕時，會觸發(fā)多次開始錄音的事件，這樣在結(jié)束錄音時就仍然會有一個正在錄音中的標識，像這樣:
下面開始曲折的修復之路:
最開始的代碼是這樣的:
Page({
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
// 初始化錄音管理器
this.recorderManager = wx.getRecorderManager()
// 錄音開始事件
this.recorderManager.onStart(() => {
})
},
/**
* 錄音按鈕點擊事件
*/
tapRecordBtn: function() {
this.setData({
// 切換頁面顯示
}, () => {
// 開始錄音
this.recorderManager.start({})
})
},
})
這時我的猜測是：頁面重新渲染之前，按鈕還是顯示狀態(tài)，所以還能被點擊。
那既然這樣，就加個標識，在一次點擊之后，到頁面重新渲染之前，都不能再次點擊就好了，代碼如下：
Page({
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
// 初始化錄音管理器
this.recorderManager = wx.getRecorderManager()
// 錄音開始按鈕點擊標識
this.isRecordBtnClicked = false
// 錄音開始事件
this.recorderManager.onStart(() => {
})
},
/**
* 錄音按鈕點擊事件
*/
tapRecordBtn: function() {
// 如果錄音按鈕已被點擊(錄音即將開始)，則不會再次觸發(fā)開始錄音事件
if (this.isRecordBtnClicked) {
return
}
this.isRecordBtnClicked = true
this.setData({
// 切換頁面顯示
}, () => {
this.isRecordBtnClicked = false
// 開始錄音
this.recorderManager.start({})
})
},
})
想法是好的，不過并沒有實現(xiàn)想要的效果。還是可以被多次點擊。
于是在多次實驗之后，改為如下的方式（可行）：
Page({
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function(options) {
// 初始化錄音管理器
this.recorderManager = wx.getRecorderManager()
// 錄音開始按鈕點擊標識
this.isRecordBtnClicked = false
// 錄音開始事件
this.recorderManager.onStart(() => {
// 將錄音按鈕的點擊狀態(tài)在錄音開始時修改
this.isRecordBtnClicked = false
})
},
/**
* 錄音按鈕點擊事件
*/
tapRecordBtn: function() {
// 如果錄音按鈕已被點擊(錄音即將開始)，則不會再次觸發(fā)開始錄音事件
if (this.isRecordBtnClicked) {
return
}
this.isRecordBtnClicked = true
this.setData({
// 切換頁面顯示
}, () => {
// 開始錄音
this.recorderManager.start({})
})
},
})
將按鈕的點擊狀態(tài)在錄音開始事件中進行重置，就可以解決這個問題了。
說一下最后驗證的結(jié)果：setData() 方法的回調(diào)函數(shù)并不是在頁面重新渲染完之后才執(zhí)行的，所以并不能以回調(diào)函數(shù)作為一個明確的時間點來處理一些邏輯。而由于recorderManager.onStart() 方法觸發(fā)時會有一定的延時，所以間接的解決了這個問題。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了ES6中異步對象Promise用法,對比ES5分析了ES6異步方法Promise的使用技巧,并結(jié)合實例形式分析了連續(xù)使用Promise對象、Promise捕獲錯誤的catch()、以及Promise的高級用法,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細介紹了Bootstrap3 Grid system原理及應用,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
下面小編就為大家?guī)硪黄狫S倒計時實例_天時分秒。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)信息滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了JavaScript電子時鐘倒計時的實現(xiàn)代碼，具有一定的參考價值，感興趣的朋友可以參考一下2016-01-01
微信小程序chooseImage的用法(從本地相冊選擇圖片或使用相機拍照)
這篇文章主要介紹了微信小程序chooseImage的用法(從本地相冊選擇圖片或使用相機拍照)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
在wabpack 核心功能除了loader應該就是plugins插件了，本文主要介紹了Webpack4 plugins 實現(xiàn)原理，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
bootstrap fileinput 插件使用項目總結(jié)(經(jīng)驗)
這篇文章主要介紹了bootstrap fileinput 插件使用項目總結(jié),是小編日常碰到的問題及解決方法，需要的朋友可以參考下2017-02-02
axios使用攔截器統(tǒng)一處理所有的http請求的方法
這篇文章主要介紹了axios使用攔截器統(tǒng)一處理所有的http請求的方法,通過一段實例代碼給大家介紹了axios攔截器使用，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
截取字符串的方法有很多，在使用過程中根據(jù)自己的實際需求進行選擇，下面整理了一些常用的方法及使用示例，感興趣的朋友可以了解下2013-10-10