[JavaScript知识库]vue轮询接口并播放音频（全局。解决重复创建问题）

音频标签

   <!-- 全局音效 -->
    <audio src="" id="eventAudio"  ></audio>

引入音频文件

// 引入音频文件
import audioMp3 from '../../assets/ding.mp3'

实现轮询

  created() {
    // 实现轮询
    if ( sessionStorage.getItem("lastCount") === null) {
      sessionStorage.setItem("lastCount", "0");
    }
    if ( sessionStorage.getItem("lastCount") === "0") {
      window.setInterval(() => {
        setTimeout(this.getNewMessage(), 0)
      }, 3000)
    }
 }

接口调用和播放判断

  methods: {
  
    // 请求是否有新消息
    getNewMessage: function() {
      console.log('请求' + this.num++ + '次')

      limitOne().then(response => {
        const newCount = response.data.data
        console.log('新的订单数量： ' + newCount + ' 上个值： ' + sessionStorage.getItem("lastCount"))
        if ( sessionStorage.getItem("lastCount") === "0") {
          sessionStorage.setItem("lastCount",newCount)
        }
        if (String(newCount) !== sessionStorage.getItem("lastCount")) {
          sessionStorage.setItem("lastCount",newCount)

          console.log('通知')
          let buttonAudio = document.getElementById('eventAudio');
          buttonAudio.setAttribute('src',audioMp3)
          buttonAudio.play()

        }
      })
    }
}

监听刷新事件 ，清空计数，重新进入该页面。可再次定时器

// 监听事件
window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))   //监听页面刷新触发事件
  },
  // 清空方法
   methods(){
  		beforeunloadHandler(e) {    //根据事件进行操作进行操作
                console.log(e)
                console.log('浏览器刷新') 
                 sessionStorage.setItem("lastCount", "0");
            },
},

创作挑战赛

新人创作奖励来咯，坚持创作打卡瓜分现金大奖