javascript - 当我尝试在下一行代码中使用它时，我初始化的变量未定义

Question

我正在开发一个大量使用 Javascript 和 jQuery 的网络应用程序。

我基本上是在网页加载时创建一个 app 对象，并在页脚中调用 init() 方法。

var app = new App();
app.init();

这些是 init() 方法中的第一行代码。

// Load up the index
app.loadIndex();

alert(hashtag_index);

这些是 loadIndex() 方法的几行。

hashtag_index  = [];

// Load the Topic JSON File
$.ajax({
    url : './data/index.json',

    type : 'GET',

    dataType : 'json',

    .
    .
    .

    // If the file loading is successful, save the index data
    success : function(data){

    var raw_index = [];

    $.each(data, function(key, val) {
        raw_index.push(data[key]);
    });

    // Add the hashtag object to global hashtag_index
    hashtag_index = raw_index;

    }
});

基本上 loadIndex() 方法所做的是加载一个大约 135kb 的 json 文件，并将数据作为对象加载到 hashtag_index 变量。 hashtag_index 变量是全局定义的，因此可以全局访问。

变量标签索引有 8 个不同的 Object 数组。但是当我尝试 alert() 变量时，变量还没有初始化。

但是 alert() 只返回一个空白信息。当我将其作为消息返回时:

alert(typeof(hashtag_index))

我收到 undefined 作为消息。

但现在我确定变量已加载，因为当我通过 Google Chrome 的控制台访问变量时，我可以看到变量已加载并且所有对象都在其中。

我唯一解决问题的方法是使用这行代码:

// Load up the index
app.loadIndex();

setTimeout( function(){

    alert(hashtag_index);

}, 500);

通过让 javascript 休眠 500 毫秒，我已经为其加载提供了足够的时间。

当然，我已经尝试了以下解决方案，但都没有成功:

解决方案 1:(进入无限循环)

// Load up the index
app.loadIndex();

while(!hashtag_index.length > 0) {

    continue;

};

alert(hashtag_index);

解决方案 2:(进入无限循环)

// Load up the index
app.loadIndex();

while(hashtag_index.length == 0) {

    continue;

};

alert(hashtag_index);

解决方案 3:(进入无限循环)

// Load up the index
app.loadIndex();

while(typeof hashtag_index === 'undefined') {

    continue;

};

alert(hashtag_index);

解决方案 4:*(进入无限循环)

// Load up the index
app.loadIndex();


while(typeof hashtag_index == null) {

    continue;

};

alert(hashtag_index);

现在我的问题是如何在不引起任何 future 问题的情况下明确地解决这个问题。我已尝试使用以前的解决方案来解决该问题，但没有一个能够正确地成功。

Answer 1

您的 app.loadIndex(); 方法使用异步的 ajax。因此 alert(hashtag_index); 在 ajax 调用完成并处理结果之前执行。

更改您的代码以使用回调，或者(我的偏好)让 app.loadIndex(); 返回一个 promise 对象。

以下是实现 promise 的方法:

var loadIndex = function() {
    var def = $.Deferred();

    $.ajax({
        //...
        success: function(result) {
            // do whatever
            def.resolve();
        }
        //...
    });   

    return def.promise();
};

....

// Load up the index
app.loadIndex().done(function() {
    alert(hashtag_index);
});

您可能需要扩展它以让 init() 返回 promise 或接受“完成”回调，这取决于您的使用情况。