最近在做錄音功能，需求大體是這樣的：點擊開始錄音按鈕，頁面狀態變為錄音中，然后開始錄音。

不過偉大的測試同學發現了一個問題：當快速的連續點擊開始錄音按鈕時，會觸發多次開始錄音的事件，這樣在結束錄音時就仍然會有一個正在錄音中的標識，像這樣:

下面開始曲折的修復之路:

最開始的代碼是這樣的:

Page({/*** 生命周期函數--監聽頁面加載*/onLoad: function(options) {// 初始化錄音管理器this.recorderManager = wx.getRecorderManager()// 錄音開始事件this.recorderManager.onStart(() => {})},/*** 錄音按鈕點擊事件*/tapRecordBtn: function() {this.setData({// 切換頁面顯示}, () => {// 開始錄音this.recorderManager.start({})})}, })

這時我的猜測是：頁面重新渲染之前，按鈕還是顯示狀態，所以還能被點擊。
那既然這樣，就加個標識，在一次點擊之后，到頁面重新渲染之前，都不能再次點擊就好了，代碼如下：

Page({/*** 生命周期函數--監聽頁面加載*/onLoad: function(options) {// 初始化錄音管理器this.recorderManager = wx.getRecorderManager()// 錄音開始按鈕點擊標識this.isRecordBtnClicked = false// 錄音開始事件this.recorderManager.onStart(() => {})},/*** 錄音按鈕點擊事件*/tapRecordBtn: function() {// 如果錄音按鈕已被點擊(錄音即將開始)，則不會再次觸發開始錄音事件if (this.isRecordBtnClicked) {return}this.isRecordBtnClicked = truethis.setData({// 切換頁面顯示}, () => {this.isRecordBtnClicked = false// 開始錄音this.recorderManager.start({})})}, })

想法是好的，不過并沒有實現想要的效果。還是可以被多次點擊。
于是在多次實驗之后，改為如下的方式（可行）：

Page({/*** 生命周期函數--監聽頁面加載*/onLoad: function(options) {// 初始化錄音管理器this.recorderManager = wx.getRecorderManager()// 錄音開始按鈕點擊標識this.isRecordBtnClicked = false// 錄音開始事件this.recorderManager.onStart(() => {// 將錄音按鈕的點擊狀態在錄音開始時修改this.isRecordBtnClicked = false})},/*** 錄音按鈕點擊事件*/tapRecordBtn: function() {// 如果錄音按鈕已被點擊(錄音即將開始)，則不會再次觸發開始錄音事件if (this.isRecordBtnClicked) {return}this.isRecordBtnClicked = truethis.setData({// 切換頁面顯示}, () => {// 開始錄音this.recorderManager.start({})})},})

結論

將按鈕的點擊狀態在錄音開始事件中進行重置，就可以解決這個問題了。
說一下最后驗證的結果：setData() 方法的回調函數并不是在頁面重新渲染完之后才執行的，所以并不能以回調函數作為一個明確的時間點來處理一些邏輯。而由于recorderManager.onStart() 方法觸發時會有一定的延時，所以間接的解決了這個問題。

總結

以上是生活随笔為你收集整理的关于微信 setData 回调函数中的坑的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。