How to use JS callbacks in a recursive way?

Question

I have this part of the code that doesn't work. It suppose to make a part of a tree view. The callback for the klassification_ajax should work after the function is done, but cause of the other ajax calls in different iteration of the while loop, then it doesn't work at all. I checked If I had just one iteration, it works cause it doesn't interfere with other ajax calls, but when it goes for the second iteration, they happen simultaneously and as the result none of them work. then I realized I should have make those iterations as a nested callback to make it work step by step, but HOW ?????

    var j = 2;
    while (result['klass-' + j]) {
        klass_id = result['klass-' + j];

        if (handled_klass.indexOf(result['klass-' + (j - 1)]) == -1) {
            handled_klass.push(result['klass-' + (j - 1)]);

            klassification_ajax(result['klass-' + (j - 1)], function () {
                $('#all-klassifikation-' + result['klass-' + (j - 1)]).collapse('show');
                $('#klassifikation-' + klass_id).css("font-weight", "Bold");
            });
        }
        else {
            $('#klassifikation-' + klass_id).css("font-weight", "Bold");
        }
        j++;
    }

Adrian · Accepted Answer · 2017-10-27T13:17:28.920

Use a closure, create another function inside your function that contains this code like below. It'll execute on each iteration. Your problem is that Ajax is Asynchronous and will not execute before the loop finishes iterating resulting in only the last value from iteration coming back.

function Closure(item, klass_id){
    klassification_ajax(item, function () {
        $('#all-klassifikation-' + item).collapse('show');
        $('#klassifikation-' + klass_id).css("font-weight", "Bold");
    });
}

Then to call it you would run the function.

var j = 2;

while (result['klass-' + j]) {
    klass_id = result['klass-' + j];

    if (handled_klass.indexOf(result['klass-' + (j - 1)]) == -1) {
        handled_klass.push(result['klass-' + (j - 1)]);

        Closure(result['klass-' + (j - 1)], 'klass-' + j);
    } else {
        $('#klassifikation-' + klass_id).css("font-weight", "Bold");
    }
    j++;
}

There are other ways you can implement it too, such as two different functions, one which runs the 'loop' more like a queue, one function which actually makes the request and in success callback runs the queue again.

It should be `item` instead of `result['klass-' + (j - 1)]` inside `Closure` and you'll need to pass in `klass_id` too. — aaron, Oct 27 '17 at 12:17
That worksss ! ... yess ... you saved my life. Thanks. Now I understand how to deal with this callback hell in the simplest way after all. — JMJ, Nov 01 '17 at 10:32

How to use JS callbacks in a recursive way?

1 Answers1