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», потому что видео еще не загружено (даже с последующим выполнением).

Answer 1

on не возвращает обещание.Вы можете дать себе обещание, подобное этому:

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

Или, если вам нужно придерживаться ES5 и использовать jQuery's 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, в конце).