详解关于微信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() 方法触发时会有一定的延时，所以间接的解决了这个问题。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序使用setData修改数组中单个对象的方法分析

    本文实例讲述了微信小程序使用setData修改数组中单个对象的方法.分享给大家供大家参考,具体如下: 微信小程序已经出来挺久的时间了,之前只是在文档上粗略的看了一下,最近稍得空闲,便利用微信小程序平台写一个练手的项目,顺便学习一下小程序开发,感觉大体跟前端开发基本类似,但是因为是在微信的平台上运行,具体还是要根据小程序的规则来编写代码的,其中还是有部分的内容跟前端中常见的有所不同,于是接下来的博客里,也会顺手记录微信小程序开发过程中的一些坑,帮助后来的小程序开发者少踩一些坑,当然我踩的坑大部分都

  • 微信小程序中this.data与this.setData的区别详解

    微信小程序中this.data与this.setData的区别详解

    一.摘要 小程序中我们会经常使用到this.data与this.setData.其中this.data是用来获取页面data对象的,而this.setData是用来更新界面的.那么他们之间的区别与联系你真的搞懂了吗? Page.prototype.setData() setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值. 注意: 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致. 单次设置的数据不能超过1024kB,请尽量避免一次

  • 微信小程序 setData使用方法及常用错误解决办法

    微信小程序 setData使用方法及常用错误解决办法 最近在弄微信小程序,类似于共享单车用来练练手,基本原理就是小程序发送经纬度给服务器,服务器从数据库中检索经纬度附近的单车传给小程序. 就在这里..没错就是这里,传回来的值是以jsonarray格式传过来的. 我需要将jsonarray进行解析获取经纬度,ID等车辆信息,然后赋值给小程序地图上的mark,一般我的思路时直接用个for循环给每个mark进行赋值然后再Setdata一下就ok, 结果没想到小程序setData()设置数组对象的某个元

  • 微信小程序 setData的使用方法详解

    微信小程序 setData的使用方法详解 最近在使用微信小程序的setData时,遇到了以下问题.如下: 官网文档在使用setData()设置数组对象的某个元素的属性时,是这么使用的: Page({ data: { array: [{text: 'init data'}], }, changeItemInArray: function() { this.setData({ 'array[0].text':'changed data' }) } }) 使用了 'array[0].text' : '

  • 微信小程序报错：this.setData is not a function的解决办法

    微信小程序 报错:this.setData is not a function 在page中定义的代码如下,代码会报错:this.setData is not a function <strong> pasteEncryptedText:function()</strong>{ let decryptedPass = this.data.decryptedPassword; if (decryptedPass == '' ){ wx.showToast({ title: '请先输入

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

    最近在做录音功能,需求大体是这样的:点击开始录音按钮,页面状态变为录音中,然后开始录音. 不过伟大的测试同学发现了一个问题:当快速的连续点击开始录音按钮时,会触发多次开始录音的事件,这样在结束录音时就仍然会有一个正在录音中的标识,像这样: 下面开始曲折的修复之路: 最开始的代码是这样的: Page({ /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { // 初始化录音管理器 this.recorderManager = wx.getRecor

  • JS回调函数原理与用法详解【附PHP回调函数】

    本文实例讲述了JS回调函数原理与用法.分享给大家供大家参考,具体如下: JS回调函数 何为回调函数,官方解释:当程序跑起来时,一般情况下,应用程序(application program)会时常通过API调用库里所预先备好的函数.但是有些库函数(library function)却要求应用先传给它一个函数,好在合适的时候调用,以完成目标任务.这个被传入的.后又被调用的函数就称为回调函数(callback function). 通常将一个函数B传入另一个函数A,并且在需要的时候再调用函数A. 说白

  • JavaScript详解使用Promise处理回调地狱与async await修饰符

    目录 Promise 回调地狱 Promise简介 Promise简单使用 async和await 修饰符 小结 Promise Promise能够处理异步程序. 回调地狱 JS中或node中,都大量的使用了回调函数进行异步操作,而异步操作什么时候返回结果是不可控的,如果我们希望几个异步请求按照顺序来执行,那么就需要将这些异步操作嵌套起来,嵌套的层数特别多,就会形成回调地狱 或者叫做 横向金字塔. 案例:有a.txt.b.txt.c.txt三个文件,使用fs模板按照顺序来读取里面的内容,代码:

  • 详解C语言用malloc函数申请二维动态数组的实例

    详解C语言用malloc函数申请二维动态数组的实例 C语言在程序运行中动态的申请及释放内存十分方便,一维数组的申请及释放比较简单. Sample one #include <stdio.h> int main() { char * p=(char *)malloc(sizeof(char)*5);//申请包含5个字符型的数组 free(p); return 0; } 是否申请二维动态内存也如此简单呢?答案是否定的.申请二维数组有一下几种方法 Sample two /* 申请一个5行3列的字符型

  • 详解python statistics模块及函数用法

    本节介绍 Python 中的另一个常用模块 -- statistics模块,该模块提供了用于计算数字数据的数理统计量的函数.它包含了很多函数,具体如下表: 名称 描述 mean() 数据的算术平均数("平均数") harmonic_mean() 数据的调和均值 median() 数据的中位数(中间值) median_low() 数据的低中位数 median_high() 数据的高中位数 median_grouped() 分组数据的中位数,即第50个百分点 mode() 离散的或标称的数

  • 详解pandas.DataFrame.plot() 画图函数

    首先看官网的DataFrame.plot( )函数 DataFrame.plot(x=None, y=None, kind='line', ax=None, subplots=False, sharex=None, sharey=False, layout=None,figsize=None, use_index=True, title=None, grid=None, legend=True, style=None, logx=False, logy=False, loglog=False,

  • 详解三种方式在React中解决绑定this的作用域问题并传参

    在React中时常会遇到this指向的作用域问题 从而导致undefined报错 先来个Demo: 功能很简单 点击按钮改变文字 import React from 'react'; export default class BindWithThis extends React.Component { constructor(props) { super(props); this.state = { msg:"BindWithThis" } } render() { return &l

  • 详解Java8合并两个Map中元素的正确姿势

     1. 介绍 本入门教程将介绍Java8中如何合并两个map. 更具体说来,我们将研究不同的合并方案,包括Map含有重复元素的情况. 2. 初始化 我们定义两个map实例 private static Map<String, Employee> map1 = new HashMap<>(); private static Map<String, Employee> map2 = new HashMap<>(); Employee类 public class

  • 详解C++11 线程休眠函数

    C++ 11之前并未提供专门的休眠函数.c语言的sleep.usleep其实都是系统提供的函数,不同的系统函数的功能还有些差异. 在Windows系统中,sleep的参数是毫秒. sleep(2*1000); //sleep for 2 seconds 在类Unix系统中,sleep()函数的单位是秒. sleep(2); //sleep for 2 seconds 从C++11开始,中C++标准库提供了专门的线程休眠函数,使得你的代码可以独立于不同的平台. std::this_thread::

  • 详解如何在VS2019和VScode中配置C++调用python接口

    详解如何在VS2019和VScode中配置C++调用python接口

    why 看到这个标题有些人说了,为什么好好的C++你非要调用python?人家明明是两种语言呀! 但是在实际应用中,有时候会用到C/C++调用python来更简单地去完成一些功能,不然人家python为什么有一个文件夹叫include,里边全是.h文件呢? VScode中配置环境 首先是在VScode中为C++调用python接口配置环境,这里假设你已经配置好了c++编程环境! 1.配置step1 用快捷键Ctrl+Shift+X打开Extensions 商店,输入python,install:

随机推荐