详解关于微信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 相关文章推荐
function, new function, new Function之间的区别
Mar 08 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
Mar 23 Javascript
深入理解JavaScript中Ajax
Aug 02 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
关于TypeScript模块导入的那些事
Jun 12 Javascript
Taro集成Redux快速上手的方法示例
Jun 21 Javascript
vue过滤器用法实例分析
Mar 15 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
Sep 11 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
js实现自动锁屏功能
Jun 02 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&java(一)
2006/10/09 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
PHP 面向对象详解
2012/09/13 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php+ajax实现无刷新分页
2015/11/18 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
javascript中的几个运算符
2007/06/29 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
Angular实现购物车计算示例代码
2017/02/21 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
如何理解Vue的作用域插槽的实现原理
2017/08/19 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
python正则匹配查询港澳通行证办理进度示例分享
2013/12/27 Python
python缩进区别分析
2014/02/15 Python
python根据距离和时长计算配速示例
2014/02/16 Python
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
Python自定义简单图轴简单实例
2018/01/08 Python
PyQt Qt Designer工具的布局管理详解
2019/08/07 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
中国跨镜手机配件批发在线商店:TVC-Mall
2019/08/20 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
农业大学毕业生的个人自我评价
2013/10/11 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书
党员查摆四风问题思想汇报
2014/10/25 职场文书
运动会跳远广播稿
2015/08/19 职场文书
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫