Sweet alert JS 获取不到输入变量

Question

我正在使用 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。任何人都可以向我解释为什么我没有正确获取这些变量？举个例子是可能的。感谢阅读！

Answer 1

那是因为你在 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
              });
            });
    }); 

}

Answer 2

欢迎来到承诺的世界。

您实现的 Swal 函数正在使用一种叫做 Promise 的东西。

它的上下文类似于我们英语的承诺。

因此，当您调用 Swal 函数时 Javascript 它向您承诺 return 好消息或坏消息。（您可以在此处了解 Promises：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。

把它想象成您是一名经理，您想要查看今天的出勤报告。你让你的助手从开发人员那里得到它。当您的助手在另一层试图与开发人员联系时，您能否看到文件中的报告？没有。但是你会在他 return 有或没有报告后得到助理的回复。

Sweet alert JS 获取不到输入变量

Sweet alert JS cannot get input variable

javascript

sweetalert