javascript - Sweet Alert JS无法获取输入变量

Question

我正在使用Sweet Alert JS来提示窗口获取一些输入变量。我试图在函数之外使用这些变量，它们被设置为 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。 任何人都可以解释我为什么我没有正确获得这些变量？举个例子是可以的。感谢您的阅读!

Answer 1

欢迎来到 Promise 的世界。

您实现的 Swal 函数正在使用称为 Promise 的东西。

它的上下文与我们英语的 promise 类似。

因此，当您调用 Swal 函数 Javascript 时，它会向您 promise 返回好消息或坏消息。 (您可以在这里了解 Promise: https://codeburst.io/javascript-promises-explained-with-simple-real-life-analogies-dd6908092138 )

所以 .then 是当 Javascript 有好消息时将执行的东西，即。成功案例。 .cath 将在您有坏消息时执行。失败案例。

现在，当调用 Swal 时，您的实际执行尚未停止。那仍然有效。因此，紧接着 Swal 之后是下一行

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

在等待消息到达时执行。 IE。没有内容分配给元素，因此您得到 Null。

想象一下，您是一名经理，您想要查看今天的出勤报告。你要求你的助手从开发人员那里获取它。当你的助理在另一层楼尝试与开发人员联系时，你能看到文件中的报告吗？不会。但是助理回来后，无论有没有报告，您都会收到回复。