javascript - JavaScript 函数的执行方式不总是相同吗？

Question

使用 javascript 创建模式主体的内容，我注意到结果并不总是相同。有时模态体是空的，有时正如预期的那样。功能是这样的:

function newServiceModal() {
$("#newServicesModal-bd").html("");
$("#newServiceModalHiddenId").val("");
$("#newServiceModal-title").html("New Service - body not created yet ");
var modalbody = "";
var div = document.createElement('div');
//var provideroptions = {
//    providerid:providerid
//}
$.ajax({
    type: 'post',
    url: baseSiteURL + 'home/ReturnProviders', //supposed to return all available providers
    //data: options
}).done(function (data) {
    $("#newServiceModal-title").html("New Service - body was created");
    modalbody = modalbody.concat(" <div class='col-md-4'> <p>Provider</p><select id='newproviderSelect' class='form-control'>");
    for (i = 0; i < data.length; i++) {
        if (i==0)
            modalbody = modalbody.concat(" <option value=" + data[i].id + " selected>Type: " + data[i].providerType + "</option>");
        else
            modalbody = modalbody.concat(" <option value=" + data[i].id + ">Type: " + data[i].providerType + "</option>");
    }
    modalbody = modalbody.concat('</select></div>');
    div.innerHTML = modalbody;
    document.getElementById('editServicesModal-bd').appendChild(div);
    $("#newServiceModal-title").html("New Service - body was created");
})

//var customeroptions = {
//    customerid: customerid
//}
$.ajax({
    type: 'post',
    url: baseSiteURL + 'home/ReturnCustomers', //supposed to return all available customers
    //data: options
}).done(function (data) {
    modalbody = modalbody.concat(" <div class='col-md-4'> <p>Customer</p><select id='newcustomerSelect' class='form-control'>");
    for (i = 0; i < data.length; i++) {
        if (i==0)
            modalbody = modalbody.concat(" <option value=" + data[i].id + " selected>" + data[i].company + "</option>");
        else
            modalbody = modalbody.concat(" <option value=" + data[i].id + ">" + data[i].company + "</option>");
    }
    modalbody = modalbody.concat('</select></div>');
    div.innerHTML = modalbody;
    document.getElementById('editServicesModal-bd').appendChild(div);
})

//var applicationroptions = {
//    applicationid: applicationid
//}
$.ajax({
    type: 'post',
    url: baseSiteURL + 'home/ReturnApplications', //supposed to return all available applications
    //data: options
}).done(function (data) {
    modalbody = modalbody.concat(" <div class='col-md-4'> <p>Application</p><select id='newapplicationSelect' class='form-control'>");
    for (i = 0; i < data.length; i++) {
        if (i==0)
            modalbody = modalbody.concat(" <option value=" + data[i].id + " selected>" + data[i].name + "</option>");
        else
            modalbody = modalbody.concat(" <option value=" + data[i].id + ">" + data[i].name + "</option>");
    }
    modalbody = modalbody.concat('</select></div>');
    div.innerHTML = modalbody;
    document.getElementById('newServicesModal-bd').appendChild(div);
})
$("#newServiceModal").modal('show');

}

模态 html 是这样的:

<div id="newServiceModal" class="modal fade local-modal" role="dialog" aria-hidden="true" position="fixed">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <section id="newService">
            @using (Html.BeginForm("Services", "Home", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
            {
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title" id="newServiceModal-title">original title</h4>
                </div>
                <div id="newServiceModalHiddenId"></div>
                <div class="modal-body row" id="newServicesModal-bd" style='margin-right:20px; margin-left:20px;'>
                    @* bootstrap.min.css applies here this rule : .row{margin-right:-15px;margin-left:-15px} *@
                    @* services.js puts content here *@
                </div>
                <div class="modal-footer">
                    <div class="col-md-6 pull-left">
                        <button id="savebtn" type="button" class="btn btn-primary ladda-button" data-style="expand-right" data-size="l" onclick="saveNewService()"><span class="ladda-label">Save</span></button>
                        <button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Close</button>
                    </div>
                    @*<div class="col-md-6">
                            <button type="button" class="btn btn-danger" onclick="deleteUser()">Delete</button>
                        </div>*@
                </div>
            }
        </section>
    </div>
</div>

函数的第一行

$("#newServicesModal-bd").html("");

正在清空模式主体(不要将之前的内容与即将创建的内容连接起来)。我想我的问题与此相关，因为 10 次中的 9 次模态是按预期创建的，但有时它的主体是空的，这让我怀疑主体内容根本没有创建，或者

$("#newServicesModal-bd").html("");

在正文内容创建后执行。为了验证内容是否已创建，我有这个

$("#newServiceModal-title").html("New Service - body not created yet ");

在我清空模态框的主体并将其放入之后

$("#newServiceModal-title").html("New Service - body was created");

当我创建一些内容时。

我会看到标题始终是“新服务 - 主体已创建”，因此我认为可以安全地假设主体确实已创建。我读到了有关 hoilsting 和范围的内容，我不认为它们与这个无法找到的问题有关，但无论如何我都能找到这种不一致行为的任何原因。如果有人能指出为什么会发生这种情况，我将不胜感激。感谢您阅读本文。

解决方案(？)

我调查了更多，我想发表更多评论，也许我会更好地澄清问题。函数 newServiceModal() 正在对不同的其他函数进行 3 次调用。 ReturnProviders、ReturnCustomers 和 ReturnApplications(位于我的 HomeController 类中)，它们正在调用实际从数据库检索数据的函数。我发现只有当不按此顺序调用它们(ReturnProviders、ReturnCustomers 和 ReturnApplications)时才会出现该问题。在我向一位经验丰富的程序员解释了问题并用 google 搜索后，一位经验丰富的程序员向我展示了它们的调用顺序与函数中编写的顺序不同的原因，他总共需要 5 分钟。我刚刚添加了

async: false

在我的 ajax 请求中，现在结果按照预期的顺序出现。有人向我指出，我的方法不正确，我应该对我需要的所有数据进行一次 ajax 调用，而不是 3 次。所以我一这样做就会发布正确的解决方案。感谢大家的时间和帮助。

我设法通过一个ajax调用解决了这个问题，我认为这个解决方案与我的问题无关，如果有人有兴趣给我发电子邮件以提供更多信息。就我原来的问题而言，答案是 ajax 请求正在按照函数中写入的方式执行，但有时结果不会以相同的顺序返回，除非将其添加到 ajax 调用中

async: false

在这篇文章中找到了解决方案 How do I make jQuery wait for an Ajax call to finish before it returns?

Answer 1

就像 @ManoDestra 在评论中所说，在加载 DOM 元素之后之前，您不应该执行引用或操作 DOM 元素的函数。最佳做法是将 newServiceModal() 代码放在 body 的末尾，或者在 window.onload 事件或 中运行它$(function(){ ... }) 包装器。