javascript - Jquery和函数之间的全局变量作用域问题

Question

我有以下代码:

$(document).ready(function () {

            var english = "";
            var spanish = "";

            $.get("./gamelist-english.txt",function(data){
                english = data;
                });

            $.get("./gamelist-spanish.txt",function(data){
                spanish = data;
                });

        $('#compare').mergely({
            cmsettings: { readOnly: true, lineNumbers: true },
            lhs: function(setValue) {
                setValue(english);
            },
            rhs: function(setValue) {
                setValue(spanish);
            }
        });

    });

(顺便说一句，我在这里使用合并库，但我认为这并不重要)

我遇到的问题是“西类牙语”和“英语”这两个变量都不是全局的，因此 $('#compare').mergely 无法获取它们的值(它说它们都是空的，但是这不是真的)。我怎样才能解决这个问题？我认为通过在任何函数之外声明任何变量，它们会自动成为全局变量，但显然这不起作用，或者我有点迷失了。

非常感谢。

Answer 1

事实上它们不是全局变量并不是问题所在。您拥有它们的范围很好。

问题是您在这些变量中拥有值之前调用mergely，因为ajax是异步。相反，等待调用完成:

$(document).ready(function () {
    var english = "";
    var spanish = "";

    $.when(
        $.get("./gamelist-english.txt",function(data){
            english = data;
        }),
        $.get("./gamelist-spanish.txt",function(data){
            spanish = data;
        })
    ).then(function() {
        $('#compare').mergely({
            cmsettings: { readOnly: true, lineNumbers: true },
            lhs: function(setValue) {
                setValue(english);
            },
            rhs: function(setValue) {
                setValue(spanish);
            }
        });
    });
});

不过，您完全可以避免使用这些变量，因为当您使用 $.when 时，回调会接收来自两个 Promise 的值；请注意，由于它是 $.get，因此该值是一个数组，其中数据作为数组中的第一项。

$(document).ready(function () {
    $.when(
        $.get("./gamelist-english.txt"),
        $.get("./gamelist-spanish.txt")
    ).then(function(english, spanish) {
        $('#compare').mergely({
            cmsettings: { readOnly: true, lineNumbers: true },
            lhs: function(setValue) {
                setValue(english[0]); // <== Note the [0]
            },
            rhs: function(setValue) {
                setValue(spanish[0]); // <== Note the [0]
            }
        });
    });
});