JS — нарушается порядок запуска функций. Как исправить?

Question

[Дмитрий Морозов]

Сегодня задавал уже вопрос в рамках этой задачи, но теперь вопрос другой.

Суть: Надо сначала прочитать метатеги видео, чтобы получить истинный размер видео, а потом изменять размер в зависимости от размеров окна.

var videoH = new Array,videoW = new Array;

$(document).ready(function(){
        $(window).on("resize", function () {
            scaleVideoContainer();
            scaleBannerVideoSize('.video-container video');
        }); 
        $('.video-container video').each(function(){
            $(this).bind("loadedmetadata", function () {
                videoH.push(this.videoHeight);
                videoW.push(this.videoWidth);
            });
        });
        scaleVideoContainer(); // ресайзим контейнер
        scaleBannerVideoSize('.video-container video'); // ресайзим видео
});

function scaleBannerVideoSize(element){
    var row = 0;
    $(element).each(function(){
            var videoHeight, videoWidth;
            !function(row){
                    videoHeight = videoH[row];
                    videoWidth = videoW[row];
                    console.log(videoHeight); // пусто при первичном рендере, а при ресайзе все ОК.
           }.call(this, row);
           ++row;
    });
});

Проблема в том, что сначала выполняется функция scaleBannerVideoSize а уже потом $(this).bind("loadedmetadata", function () {}

Answer 1

[Денис Инешин]

Помните что код выполняется синхронно. И любые переменные которые появятся в будущем после загрузки видео, в данный момент отсутствуют. По этому продолжение выполнения кода вы должны перенести в коллбэк metadata ready.

var videoH = [],
    videoW = [];

$(document).ready(function(){
        $(window).on("resize", function () {
            scaleVideoContainer();
            scaleBannerVideoSize('.video-container video');
        }); 
        $('.video-container video').each(function(){
            $(this).bind("loadedmetadata", function () {
                videoH.push(this.videoHeight);
                videoW.push(this.videoWidth);

                // ставим сюда
                scaleVideoContainer(); // ресайзим контейнер
                scaleBannerVideoSize('.video-container video'); // ресайзим видео
            });
        });
        // удаляем отсюда
        // scaleVideoContainer(); // ресайзим контейнер
        // scaleBannerVideoSize('.video-container video'); // ресайзим видео
});

Comments

[Дмитрий Морозов]

не совсем это верное решение. Потому как видео тегов несколько. и each прогоняет несколько раз.

[Денис Инешин]

Дмитрий Морозов: ну и норм, для каждого видео свой ресайз.

[Дмитрий Морозов]

Денис Инешин: в смысле? По коду выше при загрузке страницы функция выполняется не 1 раз, а 5. А по скольку видео 5 штук, то в итоге 25 обработок вместо 5.

[Денис Инешин]

Дмитрий Морозов: нужно переделать обработчик. Прогонять только для того видео, которое загрузилось. И получится в итоге 5

[Денис Инешин]

Дмитрий Морозов: Если вы хотите прогнать ресайз 1 раз для всех 5 видео, то вам нужно будет дождаться загрузки всех 5 видео в начале, а это более сложная логика. Например промис, ждущий все 5 загрузчиков, или спец. переменная считающая выполненные коллбэки и сранвивающая с кол-вом элементов. Как видите это не так просто.

Так же учитывайте тот факт, что если вы будете ресайзить поштучно, то все будет нормально, даже если одно видео не загрузится, а если будете ждать всех, то получите проблем.

[Дмитрий Морозов]

Денис Инешин:
Вот такой простой код. При перезагрузке страницы иногда все 5 видео в лог пишет, а иногда 1. Иногда 2. Короче не стабильно почему-то

$(document).ready(function(){

        for(var k = 0; k < videos.length; k++) {
            var video = videos[k];
            video.onloadedmetadata = function() {
                console.log(k + ':' + this.videoWidth);
                    videoH[k] = this.videoHeight;
                    videoW[k] = this.videoWidth;
            };
        }
});

[Дмитрий Морозов]

Денис Инешин: с таким кодом та же фигня

$(document).ready(function(){

        var row = 0;
        $('.video-container video').each(function(){

            !function(row){

                $(this).bind("loadedmetadata", function () {
                    console.log(row + ':' + this.videoWidth);
                    videoH[row] = this.videoHeight;
                    videoW[row] = this.videoWidth;
                    
                    scaleVideoContainer();
                    scaleBannerVideoSize($(this),row);
                });
            }.call(this, row);
        ++row;
        });
    });