js骚之回调函数——歌曲列表循环播放

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的世界还需要探索，越是探索越想探索。