Сладкое оповещение JS не может получить входную переменную - PullRequest
Новая
       4

Сладкое оповещение JS не может получить входную переменную

0 голосов
/ 04 марта 2020

Я использую Sweet alert JS для запроса windows для получения некоторых входных переменных. Я пытаюсь использовать эти переменные вне функции, и они установлены как NULL, но когда я использую их внутри функции, они устанавливаются правильно. Я читал кое-что о функциях обратного вызова, но я не понимаю их.

Это код: 

function change_meeting(event_id) {
    $('#event_change_data > p:nth-child(1)').empty();
    $('#event_change_data > p:nth-child(2)').empty();
    swal({
        title: "Change meeting date!",
        confirm: true,
        dangerMode: true,
    })
        .then(function(value) {
            swal({
                content: "input",
                title: "Insert date",
                text: "Day / Month / Year (dd/mm/yyyy)",
                confirm: true,
                dangerMode: true,
            })
                .then(function(value) {
                    $('#event_change_data > p:nth-child(1)').text(value);
                    //NOT NULL DATA
                    swal({
                        content: "input",
                        title: "Insert hour",
                        text: "Hour : Minutes (hh:mm)",
                        confirm: true,
                        dangerMode: true,
                    })
                        .then(function(value) {
                            $('#event_change_data > p:nth-child(2)').text(value);
                            //NOT NULL DATA
                        });
                });
        });
    var date = $('#event_change_data > p:nth-child(1)').text();
    var hour = $('#event_change_data > p:nth-child(2)').text();
    //NULL DATA
}

Когда данные установлены, они корректно присваиваются в тегах HTML, но когда я пытаюсь получить их, они равны NULL. enter image description here Кто-нибудь может объяснить мне, почему я не получаю правильно эти переменные? Это возможно на примере. Спасибо за чтение!

Ответы [ 2 ]

2 голосов
/ 04 марта 2020

Добро пожаловать в мир обещаний.

Реализованная вами функция Swal использует нечто, называемое Promise.

Его контекст похож на обещание нашего языка Engli sh.

Поэтому, когда вы вызываете функцию Swal Javascript, она обещает вам вернуться либо с хорошими, либо с плохими новостями. (Вы можете узнать об Обещаниях здесь: https://codeburst.io/javascript-promises-explained-with-simple-real-life-analogies-dd6908092138)

Так что тогда это то, что будет выполнено, когда у Javascript есть Хорошие новости для вас ie. Успех дела. .cath будет выполняться, когда у вас плохие новости ie. Случай неудачи.

Теперь, когда вызывается Swal, ваше фактическое выполнение не остановилось. Это все еще работает. Следовательно, сразу после Swal следующие строки 

var date = $('#event_change_data > p:nth-child(1)').text();
var hour = $('#event_change_data > p:nth-child(2)').text();

выполняются в ожидании поступления новостей. Ie. контент не назначен элементам, поэтому вы получаете Null.

Думайте об этом, как будто вы менеджер, и вы хотите увидеть отчет о сегодняшней посещаемости. Вы просите своего помощника получить его от разработчика. Когда ваш помощник находится на другом этаже, пытаясь связаться с разработчиками, вы сможете увидеть отчеты в файле? Нет. Но вы получите ответ от помощника после того, как он вернется с отчетами или без них.

0 голосов
/ 04 марта 2020

Это потому, что вы прочитали текст из элемента p до того, как он был установлен. 

function change_meeting(event_id) {
$('#event_change_data > p:nth-child(1)').empty();
$('#event_change_data > p:nth-child(2)').empty();
swal({
    title: "Change meeting date!",
    confirm: true,
    dangerMode: true,
})
    .then(function(value) {
        swal({
            content: "input",
            title: "Insert date",
            text: "Day / Month / Year (dd/mm/yyyy)",
            confirm: true,
            dangerMode: true,
        })
            .then(function(value) {
                $('#event_change_data > p:nth-child(1)').text(value);
                swal({
                    content: "input",
                    title: "Insert hour",
                    text: "Hour : Minutes (hh:mm)",
                    confirm: true,
                    dangerMode: true,
                })
                    .then(function(value) {
                        $('#event_change_data > p:nth-child(2)').text(value);
                        //NOT NULL DATA
                    })
              .then(() => {
                // THIS SHOULD BE NOT NULL
                var date = $('#event_change_data > p:nth-child(1)').text();
                var hour = $('#event_change_data > p:nth-child(2)').text();
                // DO THE STUFF YOU WANT TO DO WITH DATE AND HOUR
              });
            });
    }); 

}
...