Question

我创建了一个for循环，循环元素在容器中出现的次数。 for循环从HTML中获取一些数据并创建一个JSON url，然后返回一个值。然后应将该值添加到适当位置的HTML中。

问题似乎是在完成所有Ajax调用之前for循环完成，因此只有最后一个值被添加到HTML中。我认为我可以确保readystate等于4，但该解决方案不起作用。我也尝试使用完整的，而不是成功的Ajax事件。任何见解？这是我的代码。

for(var index = 0; index < $('#wizSteps #step6 label').length; index++){
    var priceCount;
    console.log(index);
    var currentSelect = $('#wizSteps #step6 label[data-pricepos="'+index+'"]');
    url = 'http://www.thesite.com/api/search.json?taxonomy=cat3435' + currentSelect.find('input').attr('name');
    jQuery.ajax({
        url: url,
        dataType: "JSON",
        success: function( data ){
            var totalResult = data.totalNumberOfResults;
            console.log(currentSelect);
            currentSelect.find('.itemCount').text(totalResult);

        }     
    });
}

Answer 1

没关系，调用不应该这样做。它们仅在循环中启动。

Ajax是异步的。查询稍后完成，可能顺序不同。

如果您想在下一个电话完成之前确定每个电话都已完成，你必须将下一个调用集成到前一个回调函数中。

在您的情况下，变量可能会在回调函数中被覆盖。您可以在此处了解更多信息：

Asynchronous Javascript Variable Overwrite

与该主题相关的另一个有趣的问题/讨论：

What are the differences between Deferred, Promise and Future in JavaScript?

它不能直接回答您的问题，但有助于更深入地了解问题。关键是你可能根本不需要循环（或者你做的却是完全不同的形式）。

Answer 2

看起来你不一定需要按顺序完成请求，你只需要以一种有效的方式跟踪currentSelect。为此，您可以使用context ajax选项：

for (var index = 0; index < $('#wizSteps #step6 label').length; index++) {
    var currentSelect = $('#wizSteps #step6 label[data-pricepos="' + index + '"]');
    url = 'http://www.thesite.com/api/search.json?taxonomy=cat3435' + currentSelect.find('input').attr('name');
    jQuery.ajax({
        url: url,
        dataType: "JSON",
        context: currentSelect,
        success: function (data) {
            var totalResult = data.totalNumberOfResults;
            this.find('.itemCount').text(totalResult);

        }
    });
}

Answer 3

你应该尝试创建一个递归函数，你将在ajax调用成功后再次调用，这样你就可以确保只有在前一次调用完成后才会调用下一个ajax调用。

Answer 4

如果您希望序列中的请求，则可以使用队列。

首先构建队列：

var queue = [],
    index,
    stepLength = $('#wizSteps #step6 label').length;

for(index = 0; index < length; index++){
    var priceCount;
    console.log(index);
    var currentSelect = $('#wizSteps #step6 label[data-pricepos="'+index+'"]');
    url = 'http://www.thesite.com/api/search.json?taxonomy=cat3435' + currentSelect.find('input').attr('name');
    queue.push([url, currentSelect]);
}

然后执行串行ajax请求：

function serialAjax() {
    if(queue.length === 0) {
        return;
    }
    var queueData = queue.shift(),
        url = queueData[0],
        currentSelect = queueData[1];

    jQuery.ajax({
        url: url,
        dataType: "JSON",
        success: function( data ){
            var totalResult = data.totalNumberOfResults;
            console.log(currentSelect);
            currentSelect.find('.itemCount').text(totalResult);
            serialAjax();
        }     
    });
};
// call the function
serialAjax();

在所有呼叫完成之前，Ajax呼叫For循环，For循环完成

4 个答案: