Como chamar funcão de forma síncrona Ajax ?

Front-end JavaScript
#1

O código ao carregar o país por exemplo estava carregando a cidade com o estado antes de o estado ser atualizado.

Preciso chamar funções de forma síncrona consegui resolver parte do problema colocando um intervalo de tempo antes de chamar a função, porém não é a melhor solução.

Como fazer para chamar estas funcões de forma sincrona para primeiro carregar o pais, depois o estado, depois a cidade, depois o bairro ?

function buscar_estados() {
    var pais = $('#boxPais').val();
    if (pais) {
        var url = 'estado.buscar.ajax.php?boxPais=' + pais;
        $.get(url, function (dataReturn) {
            $('#load_estados').html(dataReturn);
        });
        
        window.setTimeout( buscar_cidades, 1000 );
    }
}

function buscar_cidades() {
    var estado = $('#boxEstado').val();
    if (estado) {
        var url = 'cidade.buscar.ajax.php?boxEstado=' + estado;
        $.get(url, function (dataReturn) {
            $('#load_cidades').html(dataReturn);
        });
        window.setTimeout( buscar_bairros(), 1000 );
    }
}

function buscar_bairros() {
    var bairro = $('#boxCidade').val();
    if (bairro) {
        var url = 'bairro.buscar.ajax.php?boxBairro=' + bairro;
        $.get(url, function (dataReturn) {
            $('#load_bairros').html(dataReturn);
        });
        window.setTimeout( buscar_logradouros(), 1000 );
    }
}

function buscar_logradouros() {
    var logradouro = $('#boxBairro').val();
    if (logradouro) {
        var url = 'logradouro.buscar.ajax.php?boxLogradouro=' + logradouro;
        $.get(url, function (dataReturn) {
            $('#load_logradouros').html(dataReturn);
        });
    }
}
#2

Até tem como fazer Ajax síncrono mas é altamente não-recomendado. Vai travar sua página inteira enquanto o serviço não retorna. Coisas síncronas em JS raramente são uma boa ideia.

O que vc precisa é orquestrar as chamadas do seu Ajax para uma ser chamada apenas após a outra (se realmente é isso que você quer). Basta chamar o 2º Ajax dentro do callback do 1º. Aí ele só vai ser chamado quando o 1º retornar.

Algo assim:

$.get('estado.buscar.ajax.php?boxPais=' + pais, function (dataReturn) {
    $('#load_estados').html(dataReturn);

    // chama o 2º ajax aqui dentro
        $.get('cidade.buscar.ajax.php?boxEstado=' + estado, function (dataReturn) {
            $('#load_cidades').html(dataReturn);
        });
});
```

Aí, claro, dá aquela organizada com as funções certinhas que você criou. Mas a ideia é essa....
1 curtida
#3

Complementando…

faz chama o evento para alterar as cidades no “change”…

tipo:

$("#boxEstado").on('change',function(){
    buscar_cidades();
});
$("#boxCidades").on('change',function(){
    buscar_bairros();
});

....

e tirar os window.setTimeout