Unexpected execution order in javascript

Question

I'm writing a couple of functions calling each other in js and I found a unexpected (by me) behaviour in the order of execution.

    <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>

According to the calls I make, I was expecting to see:

1. alert('LECTURA BD: '+data);

2. alert('LECTURA OBTENIDA: '+array);

However, the order is completely the oposite and it causes a failure in my result. Is there any logical reason for this?

As an extra information, I am using it in .net MVC and Chrome.

Answer 1

Ajax is asynchronous and will not execute immediately. It will wait for the request on /Incidencias/ObtenerProveedores to complete before executing. That's why your LECTURA OBTENIDA alerts first. The LECTURA BD was still waiting at that time.

You should put everything you need after the Ajax on a callback:

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

You're making an ajax call which will return immediately (without having called your ajax success function), then it will return from your lecturaBD function and then run alert('LECTURA OBTENIDA: '+array); When the server responds (whenever that might happen) then your ajax success function will run.

You probably want to create a specific function to put as your ajax success function. In that function you could put this code:

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

Then that code will not run until the server responds.