详解关于微信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的函数
Jan 31 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
jQuery中end()方法用法实例
Jan 08 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
js html css实现复选框全选与反选
Oct 09 Javascript
easyui中combotree循环获取父节点至根节点并输出路径实现方法
Nov 10 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
Dec 06 Javascript
vue 更改连接后台的api示例
Nov 11 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
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
深入理解PHP几个算法:PHP冒泡、PHP二分法、PHP求素数、PHP乘法表
2013/06/06 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
php中替换字符串函数strtr()和str_repalce()的用法与区别
2016/11/25 PHP
php表单处理操作
2017/11/16 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
Jquery 滑入滑出效果实现代码
2010/03/27 Javascript
javascript开发中因空格引发的错误
2010/11/08 Javascript
jquery图片放大功能简单实现
2013/08/01 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
简单实用的反馈表单无刷新提交带验证
2013/11/15 Javascript
For循环中分号隔开的3部分的执行顺序探讨
2014/05/27 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
微信小程序中的canvas 文字断行和省略号显示功能的处理方法
2018/11/14 Javascript
jquery实现轮播图特效
2020/04/12 jQuery
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
python实现在目录中查找指定文件的方法
2014/11/11 Python
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
python中使用序列的方法
2015/08/03 Python
python字符串常用方法
2018/06/14 Python
python八皇后问题的解决方法
2018/09/27 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
测控技术与仪器个人求职信范文
2013/12/30 职场文书
信息总监管理职责范本
2014/03/08 职场文书
测控技术自荐信
2014/06/05 职场文书
简单租房协议书
2014/10/21 职场文书
2014年前台接待工作总结
2014/12/05 职场文书
《绝招》教学反思
2016/02/20 职场文书
PHP实现创建以太坊钱包转账等功能
2021/04/21 PHP