快捷導(dǎo)航

詳解關(guān)于微信setData回調(diào)函數(shù)中的坑

更新時(shí)間：2019年02月18日 09:08:52 作者：覓碼君

這篇文章主要介紹了詳解關(guān)于微信setData回調(diào)函數(shù)中的坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

最近在做錄音功能，需求大體是這樣的：點(diǎn)擊開始錄音按鈕，頁(yè)面狀態(tài)變?yōu)殇浺糁?，然后開始錄音。

不過(guò)偉大的測(cè)試同學(xué)發(fā)現(xiàn)了一個(gè)問(wèn)題：當(dāng)快速的連續(xù)點(diǎn)擊開始錄音按鈕時(shí)，會(huì)觸發(fā)多次開始錄音的事件，這樣在結(jié)束錄音時(shí)就仍然會(huì)有一個(gè)正在錄音中的標(biāo)識(shí)，像這樣:

下面開始曲折的修復(fù)之路:

最開始的代碼是這樣的:

Page({

 /**
  * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
  */
 onLoad: function(options) {
  // 初始化錄音管理器
  this.recorderManager = wx.getRecorderManager()

  // 錄音開始事件
  this.recorderManager.onStart(() => {
   
  })
 },

 /**
  * 錄音按鈕點(diǎn)擊事件
  */
 tapRecordBtn: function() {
  this.setData({
   // 切換頁(yè)面顯示
  }, () => {
   // 開始錄音
   this.recorderManager.start({})
  })
 },
})

這時(shí)我的猜測(cè)是：頁(yè)面重新渲染之前，按鈕還是顯示狀態(tài)，所以還能被點(diǎn)擊。

那既然這樣，就加個(gè)標(biāo)識(shí)，在一次點(diǎn)擊之后，到頁(yè)面重新渲染之前，都不能再次點(diǎn)擊就好了，代碼如下：

Page({

 /**
  * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
  */
 onLoad: function(options) {
  // 初始化錄音管理器
  this.recorderManager = wx.getRecorderManager()
  // 錄音開始按鈕點(diǎn)擊標(biāo)識(shí)
  this.isRecordBtnClicked = false

  // 錄音開始事件
  this.recorderManager.onStart(() => {

  })
 },

 /**
  * 錄音按鈕點(diǎn)擊事件
  */
 tapRecordBtn: function() {
  // 如果錄音按鈕已被點(diǎn)擊(錄音即將開始)，則不會(huì)再次觸發(fā)開始錄音事件
  if (this.isRecordBtnClicked) {
   return
  }
  this.isRecordBtnClicked = true

  this.setData({
   // 切換頁(yè)面顯示
  }, () => {
   this.isRecordBtnClicked = false
   // 開始錄音
   this.recorderManager.start({})
  })
 },
})

想法是好的，不過(guò)并沒(méi)有實(shí)現(xiàn)想要的效果。還是可以被多次點(diǎn)擊。

于是在多次實(shí)驗(yàn)之后，改為如下的方式（可行）：

Page({

 /**
  * 生命周期函數(shù)--監(jiān)聽頁(yè)面加載
  */
 onLoad: function(options) {
  // 初始化錄音管理器
  this.recorderManager = wx.getRecorderManager()
  // 錄音開始按鈕點(diǎn)擊標(biāo)識(shí)
  this.isRecordBtnClicked = false

  // 錄音開始事件
  this.recorderManager.onStart(() => {
   // 將錄音按鈕的點(diǎn)擊狀態(tài)在錄音開始時(shí)修改
   this.isRecordBtnClicked = false
  })
 },

 /**
  * 錄音按鈕點(diǎn)擊事件
  */
 tapRecordBtn: function() {
  // 如果錄音按鈕已被點(diǎn)擊(錄音即將開始)，則不會(huì)再次觸發(fā)開始錄音事件
  if (this.isRecordBtnClicked) {
   return
  }
  this.isRecordBtnClicked = true

  this.setData({
   // 切換頁(yè)面顯示
  }, () => {
   // 開始錄音
   this.recorderManager.start({})
  })
 },

})

將按鈕的點(diǎn)擊狀態(tài)在錄音開始事件中進(jìn)行重置，就可以解決這個(gè)問(wèn)題了。

說(shuō)一下最后驗(yàn)證的結(jié)果：setData() 方法的回調(diào)函數(shù)并不是在頁(yè)面重新渲染完之后才執(zhí)行的，所以并不能以回調(diào)函數(shù)作為一個(gè)明確的時(shí)間點(diǎn)來(lái)處理一些邏輯。而由于recorderManager.onStart() 方法觸發(fā)時(shí)會(huì)有一定的延時(shí)，所以間接的解決了這個(gè)問(wèn)題。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: