JavaScript 似乎在 AJAX 调用后停止了

JavaScript Seems to Stop After AJAX Call

本文关键字:调用 AJAX JavaScript      更新时间:2023-09-26

问题标题相当模糊,但这是我的情况。我有一个 Web 应用程序大约 700+ 行 jQuery,每个函数和代码中的"主要兴趣点"在触发时由控制台日志记录。例如,我有几个函数使用对 servlet 的 AJAX 调用来检索一些信息。我记录 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!");
}

安慰

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

看起来好像它在循环访问 FetchUsers() 函数返回的用户数组的$.each()上中断。我知道该函数返回可用的数组,所以我不确定它卡在什么地方。谁能立即看到我错过的东西?我尝试先将 FetchUsers() 函数返回的users[]分配给变量,然后将其传递给$.each(),但它仍然不起作用。有什么建议吗?

编辑:用未压缩的版本替换jQuery的缩小版本后,似乎我传递给$.each()函数的用户数组现在具有.length属性,这就是它中断的原因。只是为了检查,在调用该特定$.each()函数之前,我放置了从FetchUsers()函数返回的users[].length的日志,以查看它仍然没有.length属性。然后,我转到FetchUsers()函数本身,并在返回之前放置了users[].length的日志。但是,此日志运行良好(尽管我的示例没有显示它,但它返回了 40 个用户(。那么我的users[]不是作为数组或其他东西返回吗?

FetchUsers 不返回任何内容,它甚至没有返回语句。此外,$.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()
            });
        });
        <...>
}

用"已更改!"注释更改这三行应该足以使其正常工作。(尽管您对用户的日志记录需要稍作更改,因为它们不再被推入数组。

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