vue项目登录之后接口轮询语音播放

最新推荐文章于 2024-11-01 17:19:23 发布

DuBanL

最新推荐文章于 2024-11-01 17:19:23 发布

阅读量235

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/DuBanL/article/details/124943843

版权

vue 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

该博客展示了在Vue中如何使用HTML5 audio元素播放音频，并结合Vue方法处理播放控制。同时，文章提及了定时任务的创建和异步数据获取，涉及到clearInterval和setInterval的使用，以及异步操作的处理方式。

摘要由CSDN通过智能技术生成

一、

	<audio controls="controls" ref="orderNotice" hidden>
      <source :src="orderNoticeSrc">
    </audio>
    <audio controls="controls" ref="refundNotice" hidden>
      <source :src="refundNoticeSrc">
    </audio>
    <p @click="PlayorderNotice" style="margin-bottom:30px;" hidden>播放</p>
    <p @click="PlayRefundNotice" hidden>播放2</p>

	 orderNoticeSrc : "http://xxxx.mp3",
      refundNoticeSrc : "http://xxx.mp3"

二、

	PlayorderNotice () {
      let audioPlay = this.$refs.orderNotice;
      audioPlay.play(audioPlay)
    },
    PlayRefundNotice () {
      let audioPlay = this.$refs.refundNotice;
      audioPlay.play(audioPlay)
    },

三、

created() {
    let that = this
    let timer = setTimeout(() => {
      clearTimeout(timer)
      that.startInterval()
    },2000)
  },

四、

startInterval () {
      let that = this
      let interval = async ()=>{
        await queryData();
      }
      
      

      async function queryData() {
        //# 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
        //#2.2  让异步代码看起来、表现起来更像同步代码
        var ret = await getOrderList();
        return ret;
      }
      interval();
      getUntreatedOrderList();

      function getUntreatedOrderList () {
 
        clearInterval(that.$store.state.timer)
         that.$store.state.timer = null
       
        queryData().then(function (res) {
            if (res.flag == true) {
              that.$store.state.timer = setInterval(() => { 
                getUntreatedOrderList()
              },5000)
              
            }
        })
      }
 }