JS — Как получить значение переменной из функции выше?

Question

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

Такой вот скрипт. Проблема что переменная не выводится после функции

function scaleBannerVideoSize(element){

    var windowWidth = $(window).width(),
        windowHeight = $(window).height() - 90,
        videoWidth,
        videoHeight;

    $(element).each(function(){
        $(this).bind("loadedmetadata", function () {
            videoHeight = this.videoHeight;
            videoWidth = this.videoWidth;
            console.log(videoWidth); // выводит
        });
        console.log(videoWidth); // не выводит
   });
});

Comments

[Lynn «Кофеман»]

В таком виде никак.
Изучать что такое и как работают асинхронные функции.

Answer 1

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

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

function scaleBannerVideoSize(element){

    
    var row = 0;
    $(element).each(function(){
        
        var windowWidth = $(window).width(),
            videoHeight,
            videoWidth;
        if(row == 0){var windowHeight = $(window).height()}else{var windowHeight = $(window).height() - 90}
        if(row == 1){var windowHeight = $(window).height() / 2}
        $(this).bind("loadedmetadata", function () {
            videoHeight = this.videoHeight;
            videoWidth = this.videoWidth;
        
            var videoAspectRatio = videoHeight/videoWidth,
                windowAspectRatio = windowHeight/windowWidth;
        
            if (videoAspectRatio > windowAspectRatio) {
                videoWidth = windowWidth;
                videoHeight = windowHeight;
                $(this).css({'top' : 0, 'margin-left' : 0});
            } else {
                videoHeight = windowHeight;
                videoWidth = videoHeight / videoAspectRatio;
                $(this).css({'margin-top' : 0, 'margin-left' : -(videoWidth - windowWidth) / 2 + 'px'});
            }
            if(row == 1){$(this).css({'margin-top' : 123 + 'px'});} // row всегда = 5
            
            $(this).width(videoWidth).height(videoHeight);

            $('section .video-container video').addClass('fadeIn animated');
        });
    ++row;
    });
}

Comments

[Андрей]

Опять та же проблема - цикл each отрабатывает почти мнгновенно, и row в конце итерации заполняется числом элементов. Потом происходит событие loadedmetadata для каждого элемента, и row уже равен пяти. Вам лучше использовать цикл for (там уже есть index текущего элемента, и использовать его, либо передавать row в качестве параметра function, которая вызывается при loadedmetadata

[Дмитрий Беляев]

Самый просто вариант - обернуть всю конструкцию $(this).bind в замыкание:

!function(row){
  $(this).bind("loadedmetadata", function () {
    //...
  });
}.call(this, row);

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

Дмитрий Беляев: СПАСИБО!

Answer 2

[Андрей]

Скорее всего у вас выводится undefined в каждой итерации, дело в асинхронности работы - в момент выполнения функции событие еще не произошло, а js уже выполняется. А потом, когда событие произошло, то всё работает как надо.

Решение зависит от того, какой нужен результат.

Answer 3

[Максим Тимофеев]

Читать тут: www.puzzleweb.ru/javascript/4_variables.php
Что бы понять какие бывают переменные, что такое глобальные переменные и что такое область видимости переменной.
Дочитав до конца - найдете 100% решение

Comments

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

Увы я это пробовал. Не в этом дело.

[Андрей]

Вроде проблема не в области видимости (т.к. переменные глобальные), а в асинхронности работы

[Максим Тимофеев]

Дмитрий Морозов: Как вариант пишите videoWidth в data атрибут

[Максим Тимофеев]

Дмитрий Морозов: А Ваш вариант не работает, потому что 2-й console.log(videoWidth); срабатывает раньше, чем заканчивает выполняться функция над ним.

[Максим Тимофеев]

Дмитрий Морозов: Если поставите задачу, найдем ответ. Пока не понятно зачем так?

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

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

Answer 4

[Serdji]

Вам нужно сделать замыкание что бы счетчик работал. Вы можете найти ответ тут