关于 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause() 错误
2016-12-02 12:02
627 查看
最近在做项目的时候发现一个如题的控制台报错。
一看右侧的报错文件是undefined
这下苦恼了,定位不到问题所在。
今天解决了这个问题,就来分享一下。
问题的关键所在是在执行了play()方法以后立即执行pause()方法。反之亦然
以下贴出代码
HTML:
<button id="btn1">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;
}
标红处的代码是连续点击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();
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)
一看右侧的报错文件是undefined
这下苦恼了,定位不到问题所在。
今天解决了这个问题,就来分享一下。
问题的关键所在是在执行了play()方法以后立即执行pause()方法。反之亦然
以下贴出代码
HTML:
<button id="btn1">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();
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)
相关文章推荐
- DOMException: The play() request was interrupted by a call to pause().
- The play() request was interrupted by a call to pause()
- The play() request was interrupted by a call to pause()
- C++中关于assign 0 to _debugger_hook_dummy so that the function is not folded in retail的错误
- WCF分布式开发常见错误解决(12):The server was unable to process the request,服务无法处理请求
- 关于“ORA-01653: unable to extend table SYS.AUD$ by 128 in tablespace SYSTEM”的错误
- 错误The request sent by the client was syntactically incorrect ()的解决
- 新建flex Library Project项目错误 Nothing Was Specified to be included in the library
- WCF分布式开发常见错误(12):The server was unable to process the request,服务无法处理请求
- 解决SpringMVC入参出现The request sent by the client was syntactically incorrect请求语法错误方法
- 错误:The request sent by the client was syntactically incorrect的解决
- 错误代码: 1582 Incorrect parameter count in the call to native function 'str_to_date'
- 错误400-The request sent by the client was syntactically incorrect
- SharePoint designer 2010编辑List的表单时出现错误:soap:Server was unable to process request. ---> Value does not fall within the expected range
- How to see the Physical SQL generated by a request in Presentation Service ?
- 连接WCF出现错误:The server was unable to process the request due to an internal
- SpringMVC---400错误The request sent by the client was syntactically incorrect ()
- 关于PHP开发中的Fatal error: Call-time pass-by-reference has been removed in ... 错误
- 错误:The request sent by the client was syntactically incorrect的解决