js的回调函数真的是一门精彩绝伦的技术,每一次使用都很让我感叹,废话不多说。最近再做一个音乐Dome,里面有一个功能是点击歌曲播放后自动播放下一首,然后列表循环播放。这里自动播放下一首的时候自然用到了js骚之回调来侦测当前歌曲是否播放完。为什么是骚之呢,那就看回调函数再列表循环中的表演了,看代码?,忘说了,我是用Vue来实现的,以下代码都是method里面的了。
//播放控制器
/**
这个函数是用来接收子组件传递来的音乐ID
*/
playMusic($id){
this.m_id = $id;
this.play($id,()=>{ //第一次回调,就是这里了,当播放侦测播放完当前歌曲后就播放下一首
this.playNext(); //播放下一首函数
});
},
//播放控制源
play(id , callback){
let $player = document.getElementById('playerControls');
$player.setAttribute('src' , `https://music.***.com/song/media/outer/url?id=${id}.mp3`);
setTimeout(()=>{
$player.play(); //播放歌曲
},500);
let lisen_play = setInterval(()=>{ //侦测是否播放完当前歌曲
if ($player.ended){
callback();
window.clearInterval(lisen_play);
}
},10);
},
//列表循环
playNext(){
let musicId = this.m_id;
let m_index;
let len = this.m_ids.length;
for (let i = 0; i < len; i++) {
if ((musicId+'') === (this.m_ids[i]+'')){
if (i === len){
m_index = -1;
}
m_index = i+1;
break;
}
}
this.m_id = this.m_ids[m_index];
//这里就是第二次回调,就是骚之回调,你回调我,我回调你,拿到数据就让你嘿嘿嘿……
//使用相互回调来实现列表循环
this.play(this.m_id,()=>{
this.playNext();
});
},
后面Dome做完了再放上源码,js的世界还需要探索,越是探索越想探索。