Javascript 如何在加载的元数据上使用juserc和await中获得同步负载

发布于04月30日

我想通过await使用jselect同步获取音频持续时间. 我想按照以下顺序获取alert 消息:

   111 
   222 leng=1.549188
   333 duration=1.549188 
   444

但我得到的是同步命令:

   111 
   333 duration=9999 
   444 
   222 leng=1.549188

如何修复它？

var duration = 99999 ; 

async function getAudioUrlDuration(src, callBackFun) {
    var audio = new Audio();
    audio.src = src;
    await $(audio).on("loadedmetadata", function(){
        callBackFun( audio.duration );
        duration = audio.duration ;
    });
}
function callBackFun3(leng){ 
    alert('222 leng='+leng) ; 
}
var src = "https://www.w3schools.com/tags/horse.mp3" ;

async function aaa(){
  alert(111);
  await getAudioUrlDuration(src, callBackFun3 )  ; 
  alert( '333  duration='+duration ) ; 
  alert(444);
} 
 
 aaa();

推荐答案

问题是jQuery的on函数不会返回await的promise ，您需要打开getAudioUrlDuration函数返回一个promise ，该promise 将在on回调成功时解决.

var duration = 99999; 
async function getAudioUrlDuration(src) {
    var audio = new Audio();
    audio.src = src;
    // Return a promise that resolves when the loadedmetadata event is triggered
    return new Promise((resolve) => {
        $(audio).on("loadedmetadata", function(){
            duration = audio.duration;
            resolve(audio.duration);
        });
    });
}

function callBackFun3(leng){ 
    alert('222 leng=' + leng); 
}

var src = "https://www.w3schools.com/tags/horse.mp3";

async function aaa(){
    alert(111);
    var audioDuration = await getAudioUrlDuration(src);
    callBackFun3(audioDuration);  
    alert('333 duration=' + duration); 
    alert(444);
}

aaa();