如何以递归方式使用 JS 回调？

Question

我有这部分代码不起作用。它应该成为树视图的一部分。 klassification_ajax 的回调应该在函数完成后起作用，但由于其他 ajax 在 while 循环的不同迭代中调用，它根本不起作用。我检查了如果我只有一次迭代，它会起作用，因为它不会干扰其他 ajax 调用，但是当它进行第二次迭代时，它们会同时发生，结果 none 它们起作用.然后我意识到我应该将这些迭代作为嵌套回调来使其逐步工作，但是怎么做呢？？？？？

    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++;
    }

Answer 1

使用闭包，在您的函数中创建另一个包含此代码的函数，如下所示。它将在每次迭代时执行。您的问题是 Ajax 是异步的，在循环完成迭代之前不会执行，导致迭代返回的只是最后一个值。

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

然后调用它你会运行函数。

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++;
}

您也可以通过其他方式实现它，例如两个不同的函数，其中一个运行比 'loop' 更像一个队列，一个实际发出请求并成功的函数再次回调运行队列。

如何以递归方式使用 JS 回调？

How to use JS callbacks in a recursive way?

javascript

ajax

event-driven-design

asynccallback