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

Question

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

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

您也可以通过其他方式来实现它，例如两个不同的函数，一个运行“循环”更像一个队列，一个函数实际发出请求，成功回调后再次运行队列。