最新时时彩平台演示 中新时时彩要不要交税 新时时彩三星组六技巧 最新时时彩源码修改 新时时彩遗漏走势图 新时时彩预测方法 新时时彩计算器 新时时彩开奖皇冠网址 新时时彩组三怎么玩 最新时时彩后四稳赚 新时时彩官方开奖网站 新时时彩人工计划 新时时彩开奖漏洞 新时时彩最长遗漏 新时时彩中奖顺序 360新时时彩技巧-轴承资讯 新时时彩停售 最新时时彩杀号高手 新时时彩三星走势图 玩新时时彩有什么技巧 新时时彩3星和尾走势 新时时彩后一公式 重新时时彩网站 新时时彩遗漏统计软件 吉林新时时彩走势图 新时时彩中奖怎么查 新时时彩是什么地方 新时时彩中奖怎么查 新时时彩下载手机版下载 新时时彩贴吧 最新时时彩计划软件 大赢家新时时彩 新时时彩注册送彩金 新时时彩组选投注技巧 新时时彩走势图 新时时彩万能5码 新时时彩模拟 新疆新时时彩往期开奖号码 新时时彩的玩法 新时时彩稳赚计划 最新时时彩70注 新时时彩返奖率 新时时彩杀号定胆360 新时时彩后二杀号 新时时彩振幅走势 最新时时彩教程 新时时彩后台软件 新时时彩几点开始 新时时彩日赚几百 最新时时彩注册送20
用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

关于微信 setData 回调函数中的坑

Rolan 2019-2-18 00:43

最近在做录音功能,需求大体是这样的:点击开始录音按钮,页面状态变为录音中,然后开始录音。不过伟大的测试同学发现了一个问题:当快速的连续点击开始录音按钮时,会触发多次开始录音的?#24405;?#36825;样在结束录音时就仍 ...

最近在做录音功能,需求大体是这样的:点击开始录音按钮,页面状态变为录音中,然后开始录音。

不过伟大的测试同学发现了一个问题:当快速的连续点击开始录音按钮时,会触发多次开始录音的?#24405;?#36825;样在结束录音时就仍然会有一个正在录音中的标识,像这样:

下面开始曲折的修复之路:

最开始的代码是这样的:

Page({

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // 初始化录音管理器
    this.recorderManager = wx.getRecorderManager()

    // 录音开始?#24405;?/span>
    this.recorderManager.onStart(() => {
      
    })
  },

  /**
   * 录音按钮点击?#24405;?
   */
  tapRecordBtn: function() {
    this.setData({
      // 切换页面显示
    }, () => {
      // 开始录音
      this.recorderManager.start({})
    })
  },
})

这时我的猜测是:页面重新渲染之前,按钮还是显示状态,所以还能被点击。
那既然这样,就加个标识,在一次点击之后,到页面重新渲染之前,都不能再次点击就好了,代码如下:

Page({

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // 初始化录音管理器
    this.recorderManager = wx.getRecorderManager()
    // 录音开始按钮点击标识
    this.isRecordBtnClicked = false

    // 录音开始?#24405;?/span>
    this.recorderManager.onStart(() => {

    })
  },

  /**
   * 录音按钮点击?#24405;?
   */
  tapRecordBtn: function() {
    // 如果录音按钮已被点击(录音即将开始),则不会再次触发开始录音?#24405;?/span>
    if (this.isRecordBtnClicked) {
      return
    }
    this.isRecordBtnClicked = true

    this.setData({
      // 切换页面显示
    }, () => {
      this.isRecordBtnClicked = false
      // 开始录音
      this.recorderManager.start({})
    })
  },
})

想法是好的,不过并没有实现想要的效果。还是可以被多次点击。
于是在多?#38382;?#39564;之后,改为如下的方式(可行):

Page({

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    // 初始化录音管理器
    this.recorderManager = wx.getRecorderManager()
    // 录音开始按钮点击标识
    this.isRecordBtnClicked = false

    // 录音开始?#24405;?/span>
    this.recorderManager.onStart(() => {
      // 将录音按钮的点击状态在录音开始时修改
      this.isRecordBtnClicked = false
    })
  },

  /**
   * 录音按钮点击?#24405;?
   */
  tapRecordBtn: function() {
    // 如果录音按钮已被点击(录音即将开始),则不会再次触发开始录音?#24405;?/span>
    if (this.isRecordBtnClicked) {
      return
    }
    this.isRecordBtnClicked = true

    this.setData({
      // 切换页面显示
    }, () => {
      // 开始录音
      this.recorderManager.start({})
    })
  },

})

将按钮的点击状态在录音开始?#24405;?#20013;进行重置,就可以解决这个问题了。
说一下最后验证的结果:setData() 方法的回调函数并不是在页面重新渲?#23601;?#20043;后才执行的,所以并不能以回调函数作为一个明确的时间点?#21019;?#29702;一些逻辑。而由于recorderManager.onStart() 方法触发时会有一定的延时,所以间接的解决了这个问题。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 觅码君 来自: segmentfault
新时时彩软件