uni-app nvue InnerAudioContext destroy 无法取消设置的onTimeUpdate事件

uni-app nvue InnerAudioContext destroy 无法取消设置的onTimeUpdate事件

开发环境 版本号 项目创建方式
Mac 10.15.3 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：10.15.3

HBuilderX类型：正式

HBuilderX版本号：3.2.16

手机系统：iOS

手机系统版本号：iOS 13.1

手机厂商：苹果

手机机型：iphonex

页面类型：nvue

vue版本：vue3

打包方式：离线

项目创建方式：HBuilderX

## 示例代码：


AudioInner.onTimeUpdate(this.audioTimeUpdate)；
beforeDestroy 的时候
AudioInner.destroy();

设置的audioTimeUpdate还在一直执行，没有移除

操作步骤：

AudioInner.onTimeUpdate(this.audioTimeUpdate)； beforeDestroy 的时候 AudioInner.destroy();


设置的`audioTimeUpdate`还在一直执行，没有移除

## 预期结果：


取消 timeupdate 监听

实际结果：

AudioInner.onTimeUpdate(this.audioTimeUpdate)； beforeDestroy 的时候 AudioInner.destroy();


设置的`audioTimeUpdate`还在一直执行，没有移除

## bug描述：


AudioInner.onTimeUpdate(this.audioTimeUpdate)；
beforeDestroy 的时候
AudioInner.destroy();

设置的audioTimeUpdate还在一直执行，没有移除


更多关于uni-app nvue InnerAudioContext destroy 无法取消设置的onTimeUpdate事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

您报bug/咨询问题的姿势好像不对哦，详情https://ask.dcloud.net.cn/article/38139

更多关于uni-app nvue InnerAudioContext destroy 无法取消设置的onTimeUpdate事件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题在vue模式下仍然存在，onTimeUpdate一直在监听回调，取消监听都不行

这是一个已知的 nvue 中 InnerAudioContext 的 bug。destroy() 方法在某些情况下无法完全移除通过 onTimeUpdate 设置的事件监听器。

临时解决方案：

在调用 destroy() 之前，手动将 onTimeUpdate 监听器设置为 null 或一个空函数。

修改后的代码示例：

// 1. 设置监听器
AudioInner.onTimeUpdate(this.audioTimeUpdate);

// 2. 在组件销毁前（beforeDestroy）或音频不再需要时
// 先取消监听
AudioInner.offTimeUpdate(); // 移除所有 timeupdate 监听
// 或者更精确地，如果可能：
// AudioInner.offTimeUpdate(this.audioTimeUpdate);

// 3. 再销毁实例
AudioInner.destroy();

关键点：

  1. offTimeUpdate()：这是官方提供的用于移除 timeupdate 事件监听的方法。在销毁前显式调用它，可以确保事件监听被移除。
  2. 执行顺序：务必先调用 offTimeUpdate()，再调用 destroy()。
  3. Vue 3 生命周期：在 Vue 3 的 nvue 页面中，使用 onBeforeUnmount 替代 beforeDestroy。

完整示例（Vue 3 语法）：

import { onBeforeUnmount } from 'vue';

// 在组件 setup 中
const audioInner = uni.createInnerAudioContext();

// 设置监听
const audioTimeUpdate = () => {
  // 你的逻辑
};
audioInner.onTimeUpdate(audioTimeUpdate);

// 在组件卸载前清理
onBeforeUnmount(() => {
  // 1. 移除事件监听
  audioInner.offTimeUpdate(); // 移除所有
  // 或 audioInner.offTimeUpdate(audioTimeUpdate); // 移除特定（如果支持）
  
  // 2. 停止播放（如果需要）
  audioInner.stop();
  
  // 3. 销毁实例
  audioInner.destroy();
});
回到顶部