jQuery Ajax - 在循环内不起作用

jQuery Ajax - Not working inside loop

本文关键字:不起作用 循环 Ajax jQuery      更新时间:2023-09-26

我一直在尝试解决这个问题 2 天。但事情似乎对我不起作用。

附加的代码在循环外工作正常,但是当我在循环内使用它时,它根本无法按照我想要的方式工作,并将一个空数组记录到控制台中。

另一方面,在我的 ajax 请求中使用"async:false"可以使代码正常工作并在控制台中完全正常输出数组,但如您所知,使用"async:false"已被弃用并完全冻结 UI,直到请求未完成。

除了将异步设置为 false 之外,还有其他解决方案吗?

for (var i = 0; i <= splittedURLSLength; i++) {
            var extracted = extractUsername(splittedURLS[i]);
            postData = {'name' : extracted};
            ajaxRequest = $.when( $.ajax({
            url: "/check",
            type: "POST",
            data: postData
            })).then(function(returnedResponse) {
                if (returnedResponse == "1") {
                    resultsArray.push(extracted);
                }   
            });
}
console.log(resultsArray);

您面临的问题是,您在用 AJAX 请求中的值填充控制台之前将resultsArray登录到控制台。以下代码将简要介绍如何使用响应中的数据-

for (var i = 0; i <= splittedURLSLength; i++) {
        var extracted = extractUsername(splittedURLS[i]);
        postData = {'name' : extracted};
        ajaxRequest = $.when( $.ajax({
                          url: "/check",
                          type: "POST",
                          data: postData
                      })).then(function(returnedResponse) {
                          if (returnedResponse == "1") {
                              resultsArray.push(extracted);
                              showResults(resultsArray);
                          }   
                      });
}
function showResults(resultsArray) {
    console.log(resultsArray);
    //Process your resultsArray as per requirement.
}
由于 AJAX 请求

是异步的,因此您的控制台.log将在第一个 AJAX 请求返回之前触发。这就是事件循环在Javascript中的工作方式。

您需要将逻辑移动到成功处理程序中:

for (var i = 0; i <= splittedURLSLength; i++) {
        var extracted = extractUsername(splittedURLS[i]);
        postData = {'name' : extracted};
        ajaxRequest = $.when( $.ajax({
        url: "/check",
        type: "POST",
        data: postData
        })).then(function(returnedResponse) {
            if (returnedResponse == "1") {
                resultsArray.push(extracted);
            }
            if(i === splittedURLSLength){
               console.log(resultsArray);
            }
        });

只是解决它的另一个想法...

var resultsArray[]//Global or should be pass to the function...
myIterate(0);
function myIterate(idx){
    var i = idx;
    if (i < splittedURLS.length){
        var extracted = extractUsername(splittedURLS[i]);
        postData = {'name' : extracted};
        ajaxRequest = $.when( $.ajax({
        url: "/check",
        type: "POST",
        data: postData
        })).then(function(returnedResponse) {
            if (returnedResponse == "1") {
                resultsArray.push(extracted);
                myiterate(i++);
            }   
        });
    }
}
console.log(resultsArray);