Как дождаться завершение $.each()?

Question

[Viktor091]

Всем добрый день!

Помогите пожалуйста разобраться с функцией:

let typeKMU = function() {
    let div = $(display).find('div.typeKMU');
    let typeKMU = null;
 
    $.each(div, function() {
        if ($(this).find('p').find('span').css('background-image') !== "none") {
            typeKMU = $(this).find('p').text();
 
            return false;
        }
     })
 
     return typeKMU;
 }

Функция работает через раз. То есть переменной typeKMU значение присваивается раз через раз. Я так понимаю, что функция возвращает значение переменной не дожидаясь окончание each, и соответственно иногда успевает его присвоить, а иногда нет.

И пользуясь случаем разъясните пожалуйста разницу между
div.each(function() {});
и
$.each(div, function() {});

Comments

[WapSter]

Твой цикл синхронный, ищи проблему в другом

[Viktor091]

От части согласен.
Смотрите что получается:

let typeKMU = function() {
                console.log("Запуск функции");
                let div = $(display).find('div.typeKMU');
                let result = null;

                $.each(div, function(i, block) {
                    console.log("Запускаю " + i + " интерацию цикла each");

                    if ($(block).find('p').find('span').css('background-image') !== "none") {
                        result = $(block).find('p').text();

                        console.log("Получен тип: " + result);

                        return false;
                    }
                })

                console.log("Результат вычисления typeKMU перед выводом: " + result);

                return result;
            }

Результат выполнения:
1 из примерно 10 раз:

Запуск функции
Результат вычисления typeKMU перед выводом: null

В основном все отрабатывает:

Запуск функции
Запускаю 0 интерацию цикла each
Запускаю 1 интерацию цикла each
Получен тип: Гидравлический
Результат вычисления typeKMU перед выводом: Гидравлический

То есть в итоге цикл each вообще не запускается, такое возможно?

[Viktor091]

Вот фрагмент кода:

function loading() {

            let typeKMU = function() {
                console.log("Запуск функции");
                let div = $(display).find('div.typeKMU');
                let result = null;

                $.each(div, function(i, block) {
                    console.log("Запускаю " + i + " интерацию цикла each");

                    if ($(block).find('p').find('span').css('background-image') !== "none") {
                        result = $(block).find('p').text();

                        console.log("Получен тип: " + result);

                        return false;
                    }
                })

                console.log("Результат вычисления typeKMU перед выводом: " + result);

                return result;
            }

            function sendAjax(data) {
                $.ajax('../php/quiz.php',{
                    type: "POST",
                    data: data,
                    beforeSend: function() {
                        display.append('<div class="loading"></div>');
                        $(display).find('div.loading').fadeIn(300);

                        $('div.quiz').find('div.next').unbind().addClass('notActive');
                    },
                    success: function(response) {
                        console.log("Получен ответ: "+response, data);
                    }
                })
            }

            let data = {
                notification: "choiceTypeKMU",
                typeKMU: typeKMU(),
                idUser: user.id
            };

            sendAjax(data);
        }

Может я что-то упустил?

Answer 1

[mletov]

А зачем тут вообще $.each ?
Как я понимаю, из функции требуется получить одно значение innerHTML из последнего элемента p, удовлетворяющему определенному условию.

Есть так, то используйте функцию .last()

PS Пожалуйста, постарайтесь не давать одинаковых имен (я про typeKMU), запутывает. Функцию можно было назвать, к примеру, getTypeKMU.

Answer 2

[Alex]

Включите отладчик. И пройдитесь пошагово по вашему скрипту. Вот и увидите что, в каком месте, в какой последовательности запускается и как отрабатывает.
https://learn.javascript.ru/debugging-chrome

Answer 3

[Viktor091]

Вообщем вся полемика свелась к одной строчке кода

$(display).find('div.typeKMU').find('span.okTypeKMU').closest('p').text();

Эта строчка возвращает то, что должна была вернуть функция, пришлось немного изменить логику и вместо добавления свойств css добавить класс. Спасибо mletov, натолкнул на мысль)