详解关于微信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 12 Javascript
原来Jquery.load的方法可以一直load下去
Mar 28 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
jQuery实现的tab标签切换效果示例
Sep 05 Javascript
详谈JavaScript的闭包及应用
Jan 17 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
May 16 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 Javascript
javascript实现点击产生随机图形
Jan 25 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
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
桌面中心(三)修改数据库
2006/10/09 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
2011/02/12 Javascript
20款超赞的jQuery插件 Web开发人员必备
2011/02/26 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
关于vue中的ajax请求和axios包问题
2018/04/19 Javascript
vue项目实现github在线预览功能
2018/06/20 Javascript
JS解惑之Object中的key是有序的么
2019/05/06 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
详解Vue的异步更新实现原理
2020/12/22 Vue.js
深入解析Python中的线程同步方法
2016/06/14 Python
基于ID3决策树算法的实现(Python版)
2017/05/31 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
python 比较2张图片的相似度的方法示例
2019/12/18 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
css3 伪类选择器快速复习小结
2019/09/10 HTML / CSS
加拿大领先的牛仔零售商:Bluenotes
2018/01/22 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
雅虎笔试题(字符串操作)
2015/03/24 面试题
C++是不是类型安全的
2014/02/18 面试题
学院党的群众路线教育实践活动第一阶段情况汇报
2014/10/25 职场文书
2014年卫生院工作总结
2014/12/03 职场文书
公司表扬信格式
2015/05/04 职场文书