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


Posted in Javascript onFebruary 18, 2019

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

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

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

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

最开始的代码是这样的:

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 = true

  this.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 = true

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

})

将按钮的点击状态在录音开始事件中进行重置,就可以解决这个问题了。

说一下最后验证的结果:setData() 方法的回调函数并不是在页面重新渲染完之后才执行的,所以并不能以回调函数作为一个明确的时间点来处理一些逻辑。而由于recorderManager.onStart() 方法触发时会有一定的延时,所以间接的解决了这个问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 获取LI里的内容
Dec 17 Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
js模仿hover的具体实现代码
Dec 30 Javascript
关于JavaScript命名空间的一些心得
Jun 07 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
Apr 17 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
Dec 09 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 #jQuery
JS中min函数实例讲解
Feb 18 #Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 #jQuery
小程序实现列表多个批量倒计时
Jan 29 #Javascript
记一次vue-webpack项目优化实践详解
Feb 17 #Javascript
Vuepress 搭建带评论功能的静态博客的实现
Feb 17 #Javascript
详解javascript replace高级用法
Feb 17 #Javascript
You might like
BBS(php & mysql)完整版(三)
2006/10/09 PHP
基于php iconv函数的使用详解
2013/06/09 PHP
PHP排序二叉树基本功能实现方法示例
2018/05/26 PHP
php 多个变量指向同一个引用($b = &$a)用法分析
2019/11/13 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
jQuery focus和blur事件的应用详解
2014/01/26 Javascript
JS中位置与大小的获取方法
2016/11/22 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
vue 引入公共css文件的简单方法(推荐)
2018/01/20 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
Python使用add_subplot与subplot画子图操作示例
2018/06/01 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
python破解bilibili滑动验证码登录功能
2019/09/11 Python
用openCV和Python 实现图片对比,并标识出不同点的方式
2019/12/19 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
使用html2canvas实现将html内容写入到canvas中生成图片
2020/01/03 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
乌克兰鞋类购物网站:Eobuv.com.ua
2020/11/28 全球购物
产品促销活动策划书
2014/01/15 职场文书
仓库规划计划书
2014/04/28 职场文书
收款委托书范本
2014/09/11 职场文书
安全生产标语大全
2014/10/06 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
新员工入职欢迎词
2015/01/23 职场文书
工程部主管岗位职责
2015/02/12 职场文书
故意杀人罪辩护词
2015/05/21 职场文书
如何判断pytorch是否支持GPU加速
2021/06/01 Python
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
Spring中bean集合注入的方法详解
2022/07/07 Java/Android