javascript - DOM 元素更改在 JavaScript 代码中不可见

Question

setTimeout( function () {
    ajaxLoadFormHeader("A", nRequest_ID, nJeppesen_Number); 
    ajaxLoadFormHeader("B", nRequest_ID, nJeppesen_Number);

    spinner.stop();

    if (document.getElementById("txt_A_Primary_Permits").checked ) {
        showRouting("A");
    }

    if (document.getElementById("txt_B_Primary_Permits").checked ) {
        showRouting("B");
    }
}, 500);

该页面有两个 div，分别保存我们正在使用的 A 和 B 路由信息。我通过隐藏一个并通过单击按钮显示另一个来在它们之间切换。

ajaxLoadFormHeader() 函数将数据从服务器加载到每个 header 表单上的文本和复选框元素中。

调用 ajaxLoadFormheader() 后，我查看每个表单中的复选框元素，并根据选中的元素显示路由 div 并隐藏另一个。

问题就在这里。紧随 ajaxLoadFormHeader() 函数返回后，当我检查复选框元素的“.checked”状态时，它们也没有反射(reflect) ajaxLoadFormHeader() 刚刚设置的更改。在 ajaxLoadFormHeader() 调用结束时，这些值没有改变。

我怀疑这个问题与代码如何更改 DOM 值有关，并且直到当前代码块关闭之前更改才完成并生效。换句话说，也许 DOM 的变化在 setTimeout() 函数完成之前是不可见的？

具体:调用 ajaxLoadFormHeader() 函数后，即使它实际上设置了其中一个复选框的选中状态，即 (txt_A_Primary_Permits.checked) 和 (txt_B_Primary_Permits.checked)返回 false - 即使表单加载并显示选中的框。

注意:这不是全部代码。有代码用于检测两个复选框是否都未被选中，或处理两个复选框都被选中的错误情况。我只提供了相关代码供您查看问题。

Answer 1

AJAX 中的第一个 A 代表异步。如果您的请求确实是异步的，则意味着您的代码在后台执行请求时继续运行。这意味着旋转器已停止，并且在请求仍然繁忙时评估 ifs，因此复选框的状态尚未更新。

解决此问题的正确方法是将回调或事件处理程序附加到请求完成时调用的请求。现在，确切的细节取决于您实现 ajaxLoadFormHeader 的方式，因此很难提供它们，但希望这些信息至少能帮助您找到正确的解决方案。

一个好的起点是 this question ，这是通过使用 onreadystatechange 事件的“普通”JavaScript AJAX 示例来回答的。