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

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（）函数将来自服务器的数据加载到每种标题形式的text和checkbox元素中。

调用ajaxLoadFormheader（）之后，我查看每种形式的复选框元素，并根据选中的内容显示路由div并隐藏另一个。

这是问题所在。从ajaxLoadFormHeader（）函数返回后，当我检查复选框元素的“ .checked”状态时，它们并不立即反映ajaxLoadFormHeader（）刚刚对其进行设置的更改。在ajaxLoadFormHeader（）调用结束时，值未更改。

我怀疑该问题与如何通过代码更改DOM值有关，并且这些更改要到当前代码块关闭后才能完成并生效。换句话说，也许在setTimeout（）函数完成之前不可见DOM更改？

具体说明：调用ajaxLoadFormHeader（）函数后，即使实际上确实设置了复选框之一的选中状态，（txt_A_Primary_Permits.checked）和（txt_B_Primary_Permits.checked）都返回false-即使表单已加载并显示选中的框。

注意：这还不是全部代码。有用于检测两个复选框是否均未选中，或处理两个复选框均处于错误状态的代码。我只包含了相关代码供您查看问题。

最佳答案

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

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

很好的起点是this question，使用onreadystatechange事件可以通过“普通香草” JavaScript AJAX示例得到答案。