是否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标题”）HTML（“新服务 - 身体尚未创建”）。

之后我空模态的身体，我把这个

$（ “＃newServiceModal标题”）HTML（ “新服务 - 身体的创建”）。

当我得到一些内容创建。

我会看到标题总是“新服务 - 身体被创建”，所以我认为它的安全假设身体确实被创建。 我阅读了有关浩劫和范围，我不认为认为他们必须处理这个问题找不到，但在任何情况下，我可以找到这种不一致的行为的任何理由。 如果有人能指出为什么会发生这种情况，我将不胜感激。 感谢您阅读本文。

解决方案（？）

我研究多一点，我想多结交一些评论，也许我会更好地澄清问题。 函数newServiceModal（）正在对其他函数进行3次调用。 ReturnProviders，ReturnCustomers和ReturnApplications（它们位于我的HomeController类中），它们调用实际从数据库中检索数据的函数。 我发现只有当它们（ReturnProviders，ReturnCustomers和ReturnApplications）没有用这个顺序调用时，问题才会发生。在我向他解释问题后，他向我展示了一个经验丰富的程序员向我展示了他们没有按照他们在函数中写入的顺序调用的原因，他总共需要5分钟。 我只是说

异步：假

在我的Ajax请求，现在的结果在预期的顺序来。 有人向我指出，我的方法是不正确的，我应该做一个Ajax调用所需的所有数据，而不是3个。所以我会尽快发布正确的解决方案。 谢谢大家的时间和帮助。

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

异步：假

解决方案是在这个岗位 How do I make jQuery wait for an Ajax call to finish before it returns?

Answer 1

像@ManoDestra在评论中说发现了，你不应该执行引用的功能或操作DOM元素，直到之后它们已被加载。最好的做法是将newServiceModal()代码放在body的末尾，或者在window.onload事件或$(function(){ ... })包装中运行。