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

时间:2017-10-27 12:00:44

标签: javascript ajax asynccallback event-driven-design

我有这部分代码不起作用。它假设是树视图的一部分。函数完成后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++;
    }

1 个答案:

答案 0 :(得分: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++;
}

还有其他方法可以实现它,例如两个不同的函数,一个运行'循环'更像一个队列,一个实际发出请求的函数,并且成功回调再次运行队列。