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>

根据我打的电话，我期待看到：

警报('LECTURA BD: '+数据);
警报('LECTURA OBTENIDA: '+数组);

但是，顺序完全相反，导致我的结果失败。这有什么合乎逻辑的原因吗？

作为额外信息，我在 .net MVC 和 Chrome 中使用它。

Answer 1

您正在进行 ajax 调用，它将立即 return（没有调用您的 ajax 成功函数），然后它将 return 来自您的 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);
        }'

然后该代码将不会运行直到服务器响应。

Answer 2

Ajax是异步的，不会立即执行。它将等待 /Incidencias/ObtenerProveedores 上的请求完成后再执行。这就是为什么您的 LECTURA OBTENIDA 首先发出警报。 LECTURA BD那个时候还在等

你应该把你需要的一切都放在 Ajax 回调之后：

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'); }
    });
}

javascript 中的意外执行顺序

Unexpected execution order in javascript

javascript

asp.net-ajax