详解关于微信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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
jQuery 学习6 操纵元素显示效果的函数
Feb 07 Javascript
jQuery学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
Javascript 命名空间模式
Nov 01 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
May 08 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
jquery无限级联下拉菜单简单实例演示
Nov 23 Javascript
JS动态的把左边列表添加到右边的实现代码(可上下移动)
Nov 17 Javascript
微信小程序上传图片实例
May 28 Javascript
vue生命周期与钩子函数简单示例
Mar 13 Javascript
在vue中使用image-webpack-loader实例
Nov 12 Javascript
微信小程序之高德地图多点路线规划过程示例详解
Jan 18 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
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
PHP多进程编程实例
2014/10/15 PHP
Laravel 5框架学习之向视图传送数据(进阶篇)
2015/04/08 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
js中有关IE版本检测
2012/01/04 Javascript
拖动table标题实现改变td的大小(css+js代码)
2013/04/16 Javascript
JS操作iframe里的dom(实例讲解)
2014/01/29 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
微信小程序 Toast自定义实例详解
2017/01/20 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
2018/09/15 Javascript
使用vue2.0创建的项目的步骤方法
2018/09/25 Javascript
webpack的 rquire.context用法实现工程自动化的方法
2020/02/07 Javascript
Python 自动安装 Rising 杀毒软件
2009/04/24 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python获取任意xml节点值的方法
2015/05/05 Python
Python学习笔记之if语句的使用示例
2017/10/23 Python
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
django富文本编辑器的实现示例
2019/04/10 Python
python将四元数变换为旋转矩阵的实例
2019/12/04 Python
Pandas缺失值2种处理方式代码实例
2020/06/13 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
美国保健品专家:Life Extension
2018/05/04 全球购物
计算机本科生自荐信
2013/10/15 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
工程建设实施方案
2014/03/14 职场文书
个人贷款收入证明
2014/10/26 职场文书
我们的节日端午节活动总结
2015/02/11 职场文书
罗马假日观后感
2015/06/08 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS