Как одновременно получить данные из callback и передать их в callback?

Question

Александр Дегтярев @alexdeg

Новатор

Как одновременно получить данные из callback и передать их в callback?

Добрый день.

Есть следующий код:

function box(nameBlock, options, callback) {
        var code = options.code ? options.code : [];
        var inputs = [];
        var currentBlock = document.querySelector('#' + nameBlock);

        for (var i = 0; i < code.length; i++) 
            if (code[i] == nameBlock) {
                currentBlock.innerHTML = callback();

                for (var j = 0; j < currentBlock.querySelectorAll('input').length; j++) inputs.push(currentBlock.querySelectorAll('input')[j].getAttribute('name'));

                callback(null, null, inputs);
            }
    }

и его использование:

box('test', {}, function(error, result, page){
        return '<div>Auth</div><br><input name="login" placeholder="Enter login"><br><input name="password" placeholder="Enter password">';
    });

Суть работы такая — мы отправляем HTML код через return обратно в функцию, где она согласно роста вставляется в нужное место на странице. Но нам также нужно в переменную page передавать данные об inputs блока и иметь возможность использовать их результаты в верстке перед отправкой в return. Получается ситуация что не удается получить доступ к inputs пока не вставится код из return (ведь инпуты еще в верстке не присутствуют) и передать их в переменнуюю callback тоже не получается. При получении дсотупа сначала выводится undefined (что логично) а затем уже только отправляются данные inputs которыенельзя прочитать и использовать.

Вопрос — возможно ли как то и получить верстку из return и без проблем сразу получить доступ к page где будут хранится inputs с верстки?

Вопрос задан 15 февр.
151 просмотр

7 комментариев

Подписаться 1 Простой 7 комментариев

Алексей Ярков @yarkov Куратор тега JavaScript

Пример сделайте в песочнице, чтобы потыкать

Написано 15 февр.
Александр Дегтярев @alexdeg Автор вопроса

Алексей Ярков, https://jsfiddle.net/0x16sLw3/

Лучше сразу включить консоль. там описанная проблема видна. Сначала выдается undefined а затем уже нужная информация но когда ловлю нужное значение то сначала получаю undefined и дальше не могу ничего использовать

Написано 15 февр.
Александр Дегтярев @alexdeg Автор вопроса

Алексей Ярков, https://jsfiddle.net/5fy2rot0/ вот новая версия. Данные передаются в page но там почему-то не обрабатываются

Написано 15 февр.

Михаил Ливач @Mausglov

Александр Дегтярев, а как, по -Вашему, они должны обрабатываться? Вы сначала ищете в узле input, а только потом этот инпут добавляете ( через innerHTML ) . Вот так работать будет:

<script>
    'use strict';

    box('hero', { isDefault: true, views: ['about'], code: ['hero', 'auth'] }, function(error, result, page){
        page.innerHTML = '<h1>Hero</h1><input id="crt1" name="submite" value="Hello">';
        console.log(page.querySelector('input'));
    });
// убрал ненужное

    function box(nameBlock, options, callback) {
        var code = options.code ? options.code : [];
        var currentBlock = document.querySelector('#' + nameBlock);

        for (var i = 0; i < code.length; i++) if (code[i] == nameBlock) callback(null, null, currentBlock);
    }
</script>

Написано 15 февр.

Александр Дегтярев @alexdeg Автор вопроса

Михаил Ливач, но если мне нужны данные из инпутов которые я бы мог отправить через кэллбюк (например в переменной result, это вторая переменная в функции обратного вызова) чтобы дальше вставлять содержимое инпутов в код верстки и опять отправлять в return для дальнейшей отрисовки?

Написано 15 февр.

Александр Дегтярев @alexdeg Автор вопроса

Михаил Ливач, вот здесь я приводил несколько обновленный способ, я могу получить данные из page но не могу ими манипулировать

<!doctype html>

<title>Testing</title>
<meta charset="utf-8">

<div id="hero"></div>
<div id="about"></div>
<div id="auth"></div>

<script>
    'use strict';

    box('hero', { isDefault: true, views: ['about'], code: ['hero', 'auth'] }, function(error, result, page){
         // Данные получаются но не получается их использовать
        console.log(page);
        return '<h1>Hero</h1><input id="crt1" name="submite" value="Hello">';
    });

    box('about', {}, function(error, result, page){
        return '<div>About</div><input name="aboutFueld" placeholder="Hello About">';
    });

    box('test', {}, function(error, result, page){
        return '<div>Auth</div><br><input name="login" placeholder="Enter login"><br><input name="password" placeholder="Enter password">';
    });

    function box(nameBlock, options, callback) {
        var code = options.code ? options.code : [];
        var currentBlock = document.querySelector('#' + nameBlock);
         // Передаем данные в callback чтобы использовать их дальше
        for (var i = 0; i < code.length; i++) if (code[i] == nameBlock) currentBlock.innerHTML = callback(null, null, currentBlock);
    }
</script>

Написано 15 февр.

Михаил Ливач @Mausglov

но если мне нужны данные из инпутов которые я бы мог отправить через кэллбюк

Александр Дегтярев, значит, у Вас должны быть инпуты - сейчас, а не где-то в будущем

Написано 25 февр.

Пригласить эксперта

Ответы на вопрос 1

3 комментария

Александр Дегтярев @alexdeg Автор вопроса

Я думаю что можно заранее все эти inputs собрать и отдельно передать в глобальную переменную а дальше передать уже всю верстку, когда она построится и отобразится в глобальной переменной должны быть inputs. Но в итоге тоже выдает undefined.

Не уж то в JS нет "Нинзя практик" для управления исполнением функции...

Написано 17 февр.
alexalexes @alexalexes

Не уж то в JS нет "Нинзя практик" для управления исполнением функции...

Есть. Называется промисы. Как раз, чтобы спрятать callback функции в асинхронный код.

Написано 17 февр.
Александр Дегтярев @alexdeg Автор вопроса

alexalexes, как можно здесь их применить чтобы одновременно и обрисовывать html и получать из него данные и затем их использовать в новом рендеринге?

Написано 17 февр.

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы

JavaScript

+2 ещё

Средний
Почему у меня не работает vite при запуске npm run dev в Docker compose?
- 1 подписчик
- 2 часа назад
- 47 просмотров
0

ответов
Веб-разработка

Простой
Как получить доступ к видеоконтенту (аниме) для моего сайта?
- 1 подписчик
- 15 часов назад
- 109 просмотров
2

ответа
JavaScript

+2 ещё

Простой
Как сделать пролистывание картинок в карточке товара?
- 1 подписчик
- 21 час назад
- 112 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как манипулировать файлами в React с State Manager-ами?
- 1 подписчик
- вчера
- 44 просмотра
0

ответов
Веб-разработка

+1 ещё

Простой
Почему не отображаются картинки на сайте?
- 1 подписчик
- 23 мар.
- 115 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Почему дрожит содержимое при измении размера окна браузера?
- 3 подписчика
- 23 мар.
- 338 просмотров
1

ответ
Веб-разработка

+1 ещё

Простой
Что такое бэкенд-сервер?
- 2 подписчика
- 22 мар.
- 1928 просмотров
6

ответов
JavaScript

+1 ещё

Средний
Анимация JS, CSS. Как сделать эффект фонарика?
- 1 подписчик
- 22 мар.
- 173 просмотра
1

ответ
JavaScript

Средний
Gsap scroll trigge как сделать рабочим скроллинг внутри окна?
- 1 подписчик
- 22 мар.
- 27 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Есть ли аналоги kladr api с возможностью запросов через JS?
- 1 подписчик
- 21 мар.
- 85 просмотров
1

ответ
Показать ещё Загружается…

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

JavaScript веб-разработчик (Backend)

TurboProject

от 60 000 ₽

Senior Frontend (JavaScript) разработчик

Vital Partners

от 350 000 до 420 000 ₽

Пример сделайте в песочнице, чтобы потыкать
Алексей Ярков, https://jsfiddle.net/0x16sLw3/

Лучше сразу включить консоль. там описанная проблема видна. Сначала выдается undefined а затем уже нужная информация но когда ловлю нужное значение то сначала получаю undefined и дальше не могу ничего использовать
Алексей Ярков, https://jsfiddle.net/5fy2rot0/ вот новая версия. Данные передаются в page но там почему-то не обрабатываются
Александр Дегтярев, а как, по -Вашему, они должны обрабатываться? Вы сначала ищете в узле input, а только потом этот инпут добавляете ( через innerHTML ) . Вот так работать будет:

<script> 'use strict'; box('hero', { isDefault: true, views: ['about'], code: ['hero', 'auth'] }, function(error, result, page){ page.innerHTML = '<h1>Hero</h1><input id="crt1" name="submite" value="Hello">'; console.log(page.querySelector('input')); }); // убрал ненужное function box(nameBlock, options, callback) { var code = options.code ? options.code : []; var currentBlock = document.querySelector('#' + nameBlock); for (var i = 0; i < code.length; i++) if (code[i] == nameBlock) callback(null, null, currentBlock); } </script>
Михаил Ливач, но если мне нужны данные из инпутов которые я бы мог отправить через кэллбюк (например в переменной result, это вторая переменная в функции обратного вызова) чтобы дальше вставлять содержимое инпутов в код верстки и опять отправлять в return для дальнейшей отрисовки?
Михаил Ливач, вот здесь я приводил несколько обновленный способ, я могу получить данные из page но не могу ими манипулировать

<!doctype html> <title>Testing</title> <meta charset="utf-8"> <div id="hero"></div> <div id="about"></div> <div id="auth"></div> <script> 'use strict'; box('hero', { isDefault: true, views: ['about'], code: ['hero', 'auth'] }, function(error, result, page){ // Данные получаются но не получается их использовать console.log(page); return '<h1>Hero</h1><input id="crt1" name="submite" value="Hello">'; }); box('about', {}, function(error, result, page){ return '<div>About</div><input name="aboutFueld" placeholder="Hello About">'; }); box('test', {}, function(error, result, page){ return '<div>Auth</div><br><input name="login" placeholder="Enter login"><br><input name="password" placeholder="Enter password">'; }); function box(nameBlock, options, callback) { var code = options.code ? options.code : []; var currentBlock = document.querySelector('#' + nameBlock); // Передаем данные в callback чтобы использовать их дальше for (var i = 0; i < code.length; i++) if (code[i] == nameBlock) currentBlock.innerHTML = callback(null, null, currentBlock); } </script>
но если мне нужны данные из инпутов которые я бы мог отправить через кэллбюк

Александр Дегтярев, значит, у Вас должны быть инпуты - сейчас, а не где-то в будущем

Answer 1 · 2025-02-17 08:52:25

Вот в таких ситуациях я понимаю, зачем придумали VueJS )).
Если серьезно, то чтобы решить задачу в рамках существующего стека, то где-то тут нужно прервать поток выполнения JS функцией setTimeout с нулевым временем ожидания, и продолжить работать с инпутами внутри вызываемой функции setTimeout. Это позволит передать управление браузеру, чтобы он успел отрисовать то, что закинуто в DOM через innerHTML:

if (code[i] == nameBlock) {
                currentBlock.innerHTML = callback();
                setTimeout(function(currentBlock, inputs)
     {
  
for (var j = 0; j < currentBlock.querySelectorAll('input').length; j++) inputs.push(currentBlock.querySelectorAll('input')[j].getAttribute('name'));

                callback(null, null, inputs);
}, 0, // нулевое время setTimeout
currentBlock, inputs // проверьте, чтобы правильно передавались аргументы внутрь setTimeout
);
        break; // тут, наверное, можно прерывать внешний цикл, раз нашли нужное
            }

Как одновременно получить данные из callback и передать их в callback?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт