Question

我已经阅读过无数类似帖子寻求帮助的例子，也解释了回调背后的理论，但我无法理解。我已经到了这个阶段，我宁愿为我的特定场景找到解决方案，即使我不理解'为什么/如何'它的工作原理，我也要继续前进。我有一个需要循环的ajax调用，需要找到一种方法来阻止上一个调用完成之前的下一个调用。你能否建议我如何使用回调或其他方法来实现这一目标。

这是代码（它可以工作，但不会运行ajax调用1-by-1，因此我遇到了内存错误和页面崩溃）。运行的功能非常密集，最多可能需要20秒（但只需1秒）

function returnAjax(startLoc,startRow)
{
        var url='index.php?option=com_productfinderrtw&format=raw&task=goThroughProcess';
        var data = 'startloc='+startLoc+'&starttour='+startRow;
                            var request = new Request({
                            url: url,
                            method:'get',
                            data: data,
                            onSuccess: function(responseText){
    document.getElementById('fields-container').innerHTML= responseText;  
//I realise this is where on-success code cneeds to go- is this where the callback belongs? 
                            }
                            }).send();

}

function iterator (startLoc,startRow) {
    if (startRow <20)
        {
        startRow++;
        }
        else
        {
        startRow = 1;
        startLoc++;
        }
    return [startLoc, startRow];
}


function runRAA() {
    var startLoc = 0;
    var startRow = 1;

    while (startLoc < 47)
    {
    returnAjax(startLoc,startRow);
    $counter = iterator(startLoc,startRow);
        var newLoc = $counter[0];
        var newRow = $counter[1];

        startLoc = newLoc;
        startRow = newRow;
    }
}

runRAA()是按下按钮时运行的主要功能。如何重新排列这个以确保returnAjax在上一次完成之前不会运行？

先谢谢此事。我知道有类似的问题被提出来了，所以我请求你不要指导我其他的解释 - 我有机会阅读它们但只是没有掌握这个概念。

干杯！

PS。我知道iterator（）函数只有在returnAjax（）完成时才需要运行，因为iterator（）为returnAjax（）函数的每个实例设置新的参数值

Answer 1

允许传递将在ajax调用完成时调用的callback参数。

function returnAjax(startLoc, startRow, callback) {
    //...
    onSuccess: function(responseText) {
        document.getElementById('fields-container').innerHTML= responseText;
        if (callback) {
            callback.apply(this, arguments); //call the callback
        }
    }
    //...
}

然后你可以这样做：

 function runRAA(startLoc, startRow) {
        startLoc =  startLoc || 0;
        startRow = startRow || 1;

        if (startLoc < 47) {
            returnAjax(startLoc, startRow, function (responseText) {
                var counter = iterator(startLoc, startRow);

                //do something with the response

                //perform the next ajax request
                runRAA(counter[0], counter[1]);

            }));
        }
    }

    runRAA(); //start the process

回调以防止在完成ajax之前循环

1 个答案: