setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
项目中需要实现播放音频次数和自动播放,这时我想到了定时器,那么如何实现呢?
html
<!-- 音频 --> <audio id="audio" @timeupdate="updateTime" controls="controls" hidden>您的浏览器不支持 audio 标签。</audio>
播放次数
script
/** * 播放声音-控制播放次数 * @Date: 2019年11月4日15:26:11 * @author 苑仁杰 */ sound() { var vm = this; //保存一份原有对象 //控制播放次数 vm.soundCount = 1; // 计数器初值为1,因为首先要播放一次1 //首先播放一次 var myAudio = document.getElementById("audio"); myAudio.src = ""; myAudio.src = vm.soundAdress; myAudio.play(); vm.soundWifi(vm.currentTime); var numCount = parseInt(vm.playInterval) + 2; //循环定时器 vm.timePlayCount = setInterval(() => { // 当要求播放次数大于已播放次数,就播放 if (vm.setPlayCount > vm.soundCount) { myAudio.src = ""; myAudio.src = vm.soundAdress; myAudio.play(); vm.soundWifi(vm.currentTime); vm.soundCount++; } //如果计算的次数等于大于播放的次数,立刻清除定时器,停止播放 if ( vm.setPlayCount == vm.soundCount || vm.setPlayCount < vm.soundCount ) { vm.clearSoundTimer(); // 清理声音定时器 } }, numCount * 1000); // 每隔多长时间播放一次1 },
自动播放
script
/** * 自动播放声音 * @Date: 2019年11月4日15:26:11 * @author 苑仁杰 */ soundTurnAuto() { var vm = this; //将字符串转为整型数字 let playIntervalNum = 0; playIntervalNum = parseInt(vm.playInterval) + 2; let setPlayCountNum = 0; setPlayCountNum = parseInt(vm.setPlayCount); let skipDelayOptionsNum = 0; skipDelayOptionsNum = parseInt(vm.skipDelayOptions); let number = 0; number = playIntervalNum * setPlayCountNum + skipDelayOptionsNum; //调用下一次播放,然后开始每隔x秒自动播放y次,然后播放次数结束之后,延迟z秒后播放下一个 let count = 1; //自动播放器 vm.isTurnAutoTimer = setInterval(() => { count++; //计算自动播放每个单词次数 vm.swipeLeftNext(); // vm.$refs.wifiBright.wifiBrightClick(); }, number * 1000); },
分析
当定时器嵌套定时器时,你会发现一个问题,如果内定时器的执行间隔时间是大于外定时器的间隔间,外定时器并不会等内定时器执行完再执行,所以此时你需要计算内定时器需要的时间,让外定时器等内定时器执行完毕之后再继续执行
另外,我发现setInterval定时器并不是立即执行一次,而是等待间隔之后才开始循环执行