mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-03 14:20:50 +08:00
fix(core): 修复事件监听器泄漏
- App.vue: offline 监听器添加 onUnmounted 清理,移除冗余 console.log - MusicHook.ts: document.onkeyup 直接赋值改为 addEventListener + 防重复 - MusicHook.ts: audio-ready 监听器提取为命名函数,先移除再注册防堆叠
This commit is contained in:
@@ -131,14 +131,16 @@ onMounted(async () => {
|
|||||||
|
|
||||||
// 检查网络状态,离线时自动跳转到本地音乐页面
|
// 检查网络状态,离线时自动跳转到本地音乐页面
|
||||||
if (!navigator.onLine) {
|
if (!navigator.onLine) {
|
||||||
console.log('检测到无网络连接,跳转到本地音乐页面');
|
|
||||||
router.push('/local-music');
|
router.push('/local-music');
|
||||||
}
|
}
|
||||||
|
|
||||||
// 监听网络状态变化,断网时跳转到本地音乐页面
|
// 监听网络状态变化,断网时跳转到本地音乐页面
|
||||||
window.addEventListener('offline', () => {
|
const handleOffline = () => {
|
||||||
console.log('网络连接断开,跳转到本地音乐页面');
|
|
||||||
router.push('/local-music');
|
router.push('/local-music');
|
||||||
|
};
|
||||||
|
window.addEventListener('offline', handleOffline);
|
||||||
|
onUnmounted(() => {
|
||||||
|
window.removeEventListener('offline', handleOffline);
|
||||||
});
|
});
|
||||||
|
|
||||||
// 初始化 MusicHook,注入 playerStore
|
// 初始化 MusicHook,注入 playerStore
|
||||||
|
|||||||
@@ -64,25 +64,27 @@ export const musicDB = await useIndexedDB(
|
|||||||
3
|
3
|
||||||
);
|
);
|
||||||
|
|
||||||
// 键盘事件处理器,在初始化后设置
|
// 键盘事件处理器(提取为命名函数,防止重复注册)
|
||||||
const setupKeyboardListeners = () => {
|
const handleKeyUp = (e: KeyboardEvent) => {
|
||||||
document.onkeyup = (e) => {
|
const target = e.target as HTMLElement;
|
||||||
// 检查事件目标是否是输入框元素
|
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
|
||||||
const target = e.target as HTMLElement;
|
return;
|
||||||
if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA') {
|
}
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const store = getPlayerStore();
|
const store = getPlayerStore();
|
||||||
switch (e.code) {
|
switch (e.code) {
|
||||||
case 'Space':
|
case 'Space':
|
||||||
if (store.playMusic?.id) {
|
if (store.playMusic?.id) {
|
||||||
void store.setPlay({ ...store.playMusic });
|
void store.setPlay({ ...store.playMusic });
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const setupKeyboardListeners = () => {
|
||||||
|
document.removeEventListener('keyup', handleKeyUp);
|
||||||
|
document.addEventListener('keyup', handleKeyUp);
|
||||||
};
|
};
|
||||||
|
|
||||||
let audioListenersInitialized = false;
|
let audioListenersInitialized = false;
|
||||||
@@ -1025,18 +1027,14 @@ export const initAudioListeners = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 添加音频就绪事件监听器
|
// 音频就绪事件处理器(提取为命名函数,防止重复注册)
|
||||||
window.addEventListener('audio-ready', ((event: CustomEvent) => {
|
const handleAudioReady = ((event: CustomEvent) => {
|
||||||
try {
|
try {
|
||||||
const { sound: newSound } = event.detail;
|
const { sound: newSound } = event.detail;
|
||||||
if (newSound) {
|
if (newSound) {
|
||||||
// 更新本地 sound 引用
|
|
||||||
sound.value = audioService.getCurrentSound();
|
sound.value = audioService.getCurrentSound();
|
||||||
|
|
||||||
// 设置音频监听器
|
|
||||||
setupAudioListeners();
|
setupAudioListeners();
|
||||||
|
|
||||||
// 获取当前播放位置并更新显示
|
|
||||||
const currentSound = audioService.getCurrentSound();
|
const currentSound = audioService.getCurrentSound();
|
||||||
if (currentSound) {
|
if (currentSound) {
|
||||||
const currentPosition = currentSound.currentTime;
|
const currentPosition = currentSound.currentTime;
|
||||||
@@ -1044,10 +1042,12 @@ window.addEventListener('audio-ready', ((event: CustomEvent) => {
|
|||||||
nowTime.value = currentPosition;
|
nowTime.value = currentPosition;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
console.log('音频就绪,已设置监听器并更新进度显示');
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('处理音频就绪事件出错:', error);
|
console.error('处理音频就绪事件出错:', error);
|
||||||
}
|
}
|
||||||
}) as EventListener);
|
}) as EventListener;
|
||||||
|
|
||||||
|
// 先移除再注册,防止重复
|
||||||
|
window.removeEventListener('audio-ready', handleAudioReady);
|
||||||
|
window.addEventListener('audio-ready', handleAudioReady);
|
||||||
|
|||||||
Reference in New Issue
Block a user