最近在做项目的时候发现一个如题的控制台报错。一看右侧的报错文件是undefined
这下苦恼了,定位不到问题所在。
今天解决了这个问题,就来分享一下。
问题的关键所在是在执行了play()方法以后立即执行pause()方法。反之亦然
以下贴出代码
HTML:
<button id="btn1" onclick="playOrPause()">test</button>
JS:
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下就会出错)
当然,我们可以设置一个保护性延时
如下
var music=new Audio(); music.src="/1.mp3"; music.loop=true; var playStatus=false; var lastRunTime=Date.now(); function playOrPause(){ var currentTime=Date.now(); //设置保护性延时 单位毫秒,不要小于50 建议100以上 var protectTime=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)
6条评论
test after config the anti-rubbish coments
扯什么
456456
优秀啊
I am really delighted to glance at this website posts which carries tons of useful data, thanks for providing such information. Rivi Taylor Orpheus
A round of applause for your article post. Thanks Again. Great. Doll Antone McHale