最近在作項目的時候發現一個如題的控制檯報錯。javascript

一看右側的報錯文件是undefinedjava
這下苦惱了,定位不到問題所在。oop
今天解決了這個問題,就來分享一下。測試
問題的關鍵所在是在執行了play()方法之後當即執行pause()方法。反之亦然spa
如下貼出代碼code
HTML:blog
<button id="btn1">test</button>
JS:ip
var music=new Audio();
music.src="/1.mp3";//這裏替換成一個有效的音頻文件地址以方便測試
music.loop=true;
var playStatus=false;
function playOrPause(){
if(playStatus){
music.pause();
}else{
music.play();
}
playStatus=!playStatus;
}
for(var i=0;i<10;i++){
document.querySelector("#btn1").click();
}
標紅處的代碼是連續點擊10下#btn1 亦即連續快速執行10次playOrPause() 會出現圖1的報錯狀況(固然 連續2下就會出錯)io
固然,咱們能夠設置一個保護性延時ast
以下
var music=new Audio();
music.src="/1.mp3";
music.loop=true;
var playStatus=false;
var lastRunTime=Date.now();
function playOrPause(){
var currentTime=Date.now();
var protectTime=100;//設置保護性延時 單位毫秒,不要小於50 建議100以上
if((currentTime-lastRunTime)<protectTime){
return;//兩次執行太過頻繁,直接退出
}
if(playStatus){
music.pause();
}else{
music.play();
}
playStatus=!playStatus;
lastRunTime=Date.now();
}
for(var i=0;i<10;i++){
document.querySelector("#btn1").click();
}
可是,這樣就違背了咱們想模擬連按10下的初衷
因此能夠用這種方法
var music=new Audio();
music.src="/1.mp3";
music.loop=true;
var playStatus=false;
var lastRunTime=Date.now();
function playOrPause(){
var currentTime=Date.now();
var protectTime=100;//設置保護性延時 單位毫秒,不要小於50 建議100以上
if((currentTime-lastRunTime)<protectTime){
return;//兩次執行太過頻繁,直接退出
}
if(playStatus){
music.pause();
}else{
music.play();
}
playStatus=!playStatus;
lastRunTime=Date.now();
}
var counter=10;//要連點的次數
var timer=setInterval(function(){
if(counter>0){
document.querySelector("#btn1").click();
}else{
clearInterval(timer);
}
counter--;
},500)