JavaScript 似乎在 AJAX 调用后停止

Question

问题标题相当模糊，但这是我的情况。我有大约 700 多行 jQuery 用于 Web 应用程序，每个函数和代码中的“主要兴趣点”在代码中由控制台日志记录，当它触发时。例如，我有一些函数使用 AJAX 调用 servlet 来检索一些信息。我会记录 AJAX 请求开始的时间、是否成功（然后打印它收集的数据）等。因此，从我打开页面时控制台记录的内容来看，它似乎在第一次 AJAX 调用后停止了。诚然，该调用似乎运行良好，并且返回的数据也很完美。正如您将看到的，它甚至按预期填充了选择框。然而，控制台日志不久后停止，让我相信由于某种原因，其他函数没有被调用...

jQuery

$(document).ready(function() {
    Initialize();
});
function Initialize() {
    console.log("Initializing...");
    User();
    Widgets();
    if($.cookie("fogbugzId") != null) {
        console.log("Stored ID: " + $.cookie("fogbugzId"));
        $("#userSelect").val($.cookie("fogbugzId")).trigger("change");
        $("#userSelect").hide();
    } else console.log("No ID Stored!");
}
function User() {
    console.log("Initializing User...");
    $.each(FetchUsers(), function(index, user) {
        $("#userSelect").append($("<option>").val(user.id).text(user.name));
    });
    $("#userSelect").change(function() {
        if($("#userSelect").val() != "") {
            console.log("User Changed to " + $("#userSelect").val() + ": " + $("#userSelect").text());
            $.cookie("fogbugzId", $("#userSelect").val(), { expires: 365 });
        }
        Update();
    });
    console.log("User Initialized!");
}
function FetchUsers() {
    console.log("Loading Users...");
    $("#loading").show();
    $.get(servlet, { command: "getUsers" }, function(data) {
        var users = new Array();
        $(data).find("user").each(function() {
            users.push({
                id: $(this).find("id").text(),
                name: $(this).find("name").text()
            });
        });
        $.each(users, function(index, user) {
            console.log(">> " + user.id + ": " + user.name);
        });
        console.log("Users Loaded!");
        return(users);
    }, "xml").complete(function() {
        $("#loading").hide();
    }).error(function() {
        console.log("Loading Users Failed!");
    });
}
function Widgets() {
    console.log("Initializing Widgets...");
    // More Code
    console.log("Widgets Initialized!");
}

Console

Initializing...
Initializing User...
Loading Users...
>> 267: Alex Molthan
>> 35: Bill Brinkoetter
>> 100: Bob Yoder
>> 189: Brian Cutler
>> 559: Brian Ormond
>> 400: Corey Nakamura
Users Loaded!

但日志记录就在那里停止。因此，从数据库获取用户的 AJAX 调用工作正常，但显然 User() 函数无法正确完成。 JavaScript 控制台给我的唯一错误是我的 jquery.min.js 文件中的一个错误：

Uncaught TypeError: Cannot read property 'length' of undefined  jquery.min.js:16
    f.e.extend.each                                             jquery.min.js:16
    User                                                        modifytime.js:14
    Initialize                                                  modifytime.js:3
    (anonymous function)                                        modifyTime.jsp:21
    f.extend._Deferred.e.resolveWith                            jquery.min.js:16
    f.e.extend.ready                                            jquery.min.js:16
    f.c.addEventListener.B                                      jquery.min.js:16

它看起来好像在迭代的 $.each() 上中断了通过 FetchUsers() 函数返回的用户数组。我知道该函数返回可用的数组，所以我不确定它被困在什么上。有人能立即看到我缺少的东西吗？我尝试首先将 FetchUsers() 函数返回的 users[] 分配给一个变量，然后将其传递给 $.each() ，但还是没有成功。有什么建议吗？

编辑：用未压缩版本替换 jQuery 的缩小版本后，似乎我传递到 $.each() 函数的用户数组现在具有 < code>.length 属性，这就是它被破坏的原因。只是为了检查一下，在调用特定的 $.each() 函数之前，我放置了从 FetchUsers() 返回的 users[].length 的日志 函数可以看到它仍然没有 .length 属性。然后，我转到 FetchUsers() 函数本身，并在返回之前放置了 users[].length 的日志。然而，这个日志工作得很好（虽然我的示例没有显示它，但它返回 40 个用户）。那么我的 users[] 是否没有作为数组或其他内容返回？

Answer 1

FetchUsers 不返回任何内容，它甚至没有 return 语句。此外，$.get 是一个异步函数，因此您无法返回从 FetchUsers 函数传递给其回调的值。相反，您可以让 FetchUsers 在收到用户数据时调用回调（在这种情况下，进行更改将相对微不足道）：

function User() {
    console.log("Initializing User...");
    FetchUsers(function(user) { // Changed!
        $("#userSelect").append($("<option>").val(user.id).text(user.name));
    });
    <...>
}

function FetchUsers(callback) { // Changed!
    console.log("Loading Users...");
    $("#loading").show();
    $.get(servlet, { command: "getUsers" }, function(data) {
        //var users = new Array(); No longer necessary.
        $(data).find("user").each(function() {
            callback({ // Changed!
                id: $(this).find("id").text(),
                name: $(this).find("name").text()
            });
        });
        <...>
}

使用“Changed!”更改这三行 。注释应该足以使其正常工作。 （尽管您对获得的用户的记录需要稍微改变，因为它们不再被推入数组中。）

Answer 2

我承认我没有阅读和理解您源代码的每个部分（也没有检查所有大括号是否已关闭），但 FetchUsers 显然不会返回任何内容（与您的声明相反） - 因此对 FetchUsers() 的调用评估为“未定义” 。修复它需要一些重写，因为在 Javascript 中，您无法真正从同步函数（如 FetchUsers()）返回异步操作（如 $.get）的结果 - 这将需要多线程（某种阻塞、等待等）。