是否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(){ ... })包裝中運行。