javascript 当 promise 加载所有视频时

Question

我正在尝试用更好的 $.when promise 重构一段糟糕的代码。我需要的是等待页面中的所有视频加载完毕，然后找到最长的视频的持续时间。

旧代码是:

$.each($('video'), function() {
    this.addEventListener('loadedmetadata', function() {
        init_timer();
    });
});


var num_videos = $('body video').length;
var video_loaded = 0;

function init_timer() {

    video_loaded++;
    if(video_loaded >= num_videos) {
        console.log(getMaxVideoLenght());
    }   
}

新的是:

$.when( $('video').on('loadedmetadata') )
.done(function() {
    console.log(getMaxVideoLenght());
});

旧代码可以工作，但在新代码中，console.log 打印“0”，因为视频尚未加载(即使此时已完成)。

Answer 1

on 不返回 promise 。你可以给自己这样的 promise :

Promise.all($("video").map(function() {
    return new Promise(resolve => {
        $(this).one("loadedmetadata", resolve);
    });
})).then(() => {
    console.log(getMaxVideoLength());
});

或者，如果您需要坚持使用 ES5 并使用 jQuery 的 Deferred:

$.when.apply($, $("video").map(function() {
    var d = $.Deferred();
    $(this).one("loadedmetadata", d.resolve.bind(d));
    return d.promise();
})).done(function() {
    console.log(getMaxVideoLength());
});

<小时/>

旁注:在上面，我修正了 getMaxVideoLength 的拼写(它是最后的 th，而不是 ht)。