在javascript中的意外執行順序

Question

我正在寫幾個函數在js中調用對方，我發現在執行順序中出現了意外（由我）行爲。

<script type="text/javascript"> 

    function rellenarProveedores() { 

     var dProveedores = document.getElementById('Proveedor'); 
     var proveedorActual = document.getElementById('proveedorActual').value; 

     while (dProveedores.options.length > 0) { 
      dProveedores.remove(0); 
     } 

     var opt = document.createElement('option'); 
     opt.text = 'SELECCIONAR PROVEEDOR'; 
     opt.value = ''; 
     dProveedores.appendChild(opt); 

     var url = '/Incidencias/ObtenerProveedores'; 
     var array = lecturaBD(url); 

     alert('LECTURA OBTENIDA: '+array); 

     for (var i = 0; i < array.length; i++) { 

      var opt = document.createElement('option'); 
      var obj = array[i]; 
      opt.text = obj.Nombre; 
      opt.value = obj.ProveedorID; 
      if (obj.ProveedorID == proveedorActual) { 
       opt.selected = true; 
      } 
      dProveedores.appendChild(opt); 
     } 
    } 

    function lecturaBD(param) { 

     var enviarData; 
     var salida; 


     $.ajax({ 
      url: param, 
      type: 'POST', 
      contentType: 'application/json;', 
      data: enviarData, 
      success: function (data) { 
       alert('LECTURA BD: '+data); 
       salida = data; 
      }, 
      error: function (data) { alert('Error'); } 
     }); 

     return salida; 
    } 

    window.onload = function() { rellenarProveedores() }; 

</script> 

據我打的電話，我期待看到：

1. 警報（ 'LECTURA BD：' +數據）;

2. alert（'LECTURA OBTENIDA：'+ array）;

但是，順序是完全相反的，它會導致我的結果失敗。這有什麼合乎邏輯的原因嗎？

作爲額外的信息，我在.net MVC和Chrome中使用它。

Answer 1

Ajax是異步的，不會立即執行。它將在執行前等待/Incidencias/ObtenerProveedores上的請求完成。這就是爲什麼您的LECTURA OBTENIDA警報首先。 LECTURA BD當時還在等待。

你應該把你的阿賈克斯之後需要一個回調的一切：

function rellenarProveedores() { 
    var dProveedores = document.getElementById('Proveedor'); 
    var proveedorActual = document.getElementById('proveedorActual').value; 

    while (dProveedores.options.length > 0) { 
     dProveedores.remove(0); 
    } 

    var opt = document.createElement('option'); 
    opt.text = 'SELECCIONAR PROVEEDOR'; 
    opt.value = ''; 
    dProveedores.appendChild(opt); 

    var url = '/Incidencias/ObtenerProveedores'; 
    lecturaBD(url, function(array){ 
     alert('LECTURA OBTENIDA: '+array); 

     for (var i = 0; i < array.length; i++) { 
      var opt = document.createElement('option'); 
      var obj = array[i]; 
      opt.text = obj.Nombre; 
      opt.value = obj.ProveedorID; 
      if (obj.ProveedorID == proveedorActual) { 
       opt.selected = true; 
      } 
      dProveedores.appendChild(opt); 
     } 
    }); 
} 

function lecturaBD(param, callback) { 
    var enviarData; 
    $.ajax({ 
     url: param, 
     type: 'POST', 
     contentType: 'application/json;', 
     data: enviarData, 
     success: function(response) { 
      alert('LECTURA BD: '+data); 
      callback(response); 
     }, 
     error: function (data) { alert('Error'); } 
    }); 
} 

Answer 2

你正在做一個ajax調用，它會立即返回（沒有調用你的ajax成功函數），然後它會從你的lecturaBD函數返回，然後運行alert('LECTURA OBTENIDA: '+array);當服務器響應時（無論何時可能發生），那麼你的ajax成功功能將運行。

你可能想要創建一個特定的函數來作爲你的ajax成功函數。在該功能中，您可以輸入以下代碼：

 alert('LECTURA OBTENIDA: '+array); 

     for (var i = 0; i < array.length; i++) { 

      var opt = document.createElement('option'); 
      var obj = array[i]; 
      opt.text = obj.Nombre; 
      opt.value = obj.ProveedorID; 
      if (obj.ProveedorID == proveedorActual) { 
       opt.selected = true; 
      } 
      dProveedores.appendChild(opt); 
     }' 

然後，代碼將不會運行，直到服務器響應。