当承诺所有视频加载时的JavaScript

Question

我试图用更好的$ .when承诺来重构一段糟糕的代码.我需要的是等待页面中的所有视频都加载,然后找到最长的视频.

旧代码是:

$.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"因为视频尚未加载(即使已经完成了instad).

Answer 1

on没有回复承诺.你可以给自己一个这样的承诺:

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最后的)的拼写.