How to stop code until Ajax requests are done?

Question

I have a big problem here. I need to wait for my ajax request before continue the rest of my code. I searched during 2 days and I found a possible solution who could maybe work. I have tried so many ways to solve my problem and now I need help. The .when().done() methods just execute a function when another function is done and don't stop the execution of my code. I don't want to use $.ajax {async:false}. I tried it, it's not recommended and its not working.

So first I execute calculerTauxUtilisation() method, who called lancerRequeteObtenirTaux() several times, where I would like to wait for traiterRequeteObtenirTaux() before to execute placerTauxUtilisation(). My problem is lancerRequeteObtenirTaux is executed several times without executing traiterRequeteObtenirTaux() and placerTauxUtilisation()

Thanks for help!

Émile

var elementHoublon = null;

function calculerTauxUtilisation()
{

    var lignesHoublons = $('[id = "elementHoublon"]');
    lignesHoublons.each(function (index, item) {
    elementHoublon = $(item);
    $.when(lancerRequeteObtenirTaux(elementHoublon.children().eq(0).children().eq(0))).done(function (taux) { placerTauxUtilisation (taux) });
    });

}

function lancerRequeteObtenirTaux(item)
{
    return $.ajax({
        url: "/Recettes/tauxUtilisation/",
        data: "url=" +     "http://sv54.cmaisonneuve.qc.ca/brewmaster/houblons/tauxutilisation?" + "og=" +     $("#OGReel").val().replace(",", ".") + ",duree=" +     item.parent().next().next().next().next().children().eq(0).val(),
        success: traiterRequeteObtenirTaux
      })
}


function traiterRequeteObtenirTaux(taux)
{
    triggerA = triggerA + 1;
    var tauxUtilisation = taux;
}

function placerTauxUtilisation(taux)
{
    elementHoublon.children().eq(5).children().eq().val(taux);
}

When I do $.ajax{async:false}, I have an error in my JQuery.2.1.3.js something like that (not in my code), so it's not working and not recommended — Émile Pettersen-Coulombe, May 30 '15 at 19:15
and also why you use global `elementHoublon` variable instead of local? — Grundy, May 30 '15 at 19:17
I'm trying to recreate my error but nothing is happening. I should do something like this? lancerRequeteObtenirTaux() {$.ajax {async:false...rest of my code}} — Émile Pettersen-Coulombe, May 30 '15 at 19:20
this is a nice example of a cross-cutting concern (e.g needing an aspect) that cuts accross all methods/functions and checks if result is finished else exits the method/function — Nikos M., May 30 '15 at 19:20
Ok I tried with async: false and it's working but is there another way to solve the problem? — Émile Pettersen-Coulombe, May 30 '15 at 19:31
can you provide fiddle or plunker to reproduce error when call async? — Grundy, May 30 '15 at 19:32

score 0 · Answer 1 · answered May 30 '15 at 19:35

A simple (& untested) approach that might work for you:

function lancerRequeteObtenirTaux(item)
{
    return $.ajax({
        …
        success: function(taux){
            traiterRequeteObtenirTaux(taux);
            placerTauxUtilisation(taux);
        }
    })
}

How to stop code until Ajax requests are done?

1 Answers1