循环遍历URL并每次使用ajax请求

Question

我是 JQuery 的初学者，我正在尝试在 for 循环中使用 ajax 请求。 我的最终目标是迭代 url 数组，获取每个页面的内容并搜索具有特定类的 div，然后将 div 的内容放入数组中。探索完所有页面后，我将计算每个值在数组中出现的次数。

现在我只是想让ajax请求工作：

$(document).ready(function(){
    var url = 'https://peekaboo-rpg.forumactif.com';
    var topic = '/t6203-';
    var sectionUrl = [
    '','p10-','p20-';
    
    for(var i=0; i<=sectionUrl.length; i++){
      var keySearch = url+topic+sectionUrl[i];
      
      $.ajax({
          url:keySearch,
          success:function(data){
            console.log(keySearch);
          }
        });
    }
});

此代码将简单地返回控制台中每个页面的 url，实际上它为sectionUrl 部分返回“未定义”；所以当我尝试像这样实际获取数据时：

lesgens = [].slice.call($(".pab_sujpseudo a span strong", data));
lesnoms = lesgens.map(function(elem) { return elem.innerHTML; });
console.log(lesnoms);

它总是返回相同的值，即数组中第一项的值。

Answer 1

您面临的问题与 JavaScript 中 AJAX 请求的异步性质有关。当您在循环内发出多个 AJAX 请求时，循环会继续执行，当请求完成且回调运行时，循环变量（本例中为 i）已经达到其最终值。

为了解决这个问题并确保每个 AJAX 请求使用正确的 keySearch 值，您可以使用闭包或 let 关键字。这是代码的更新版本，使用 let 关键字为每次迭代创建单独的范围：

$(document).ready(function(){
    var url = 'https://peekaboo-rpg.forumactif.com';
    var topic = '/t6203-';
    var sectionUrl = ['', 'p10-', 'p20-'];
    
    for (var i = 0; i < sectionUrl.length; i++) {
      (function(index) {
        var keySearch = url + topic + sectionUrl[index];
        
        $.ajax({
          url: keySearch,
          success: function(data) {
            console.log(keySearch);
          }
        });
      })(i);
    }
});

在此代码中，我们在循环内创建一个函数，该函数将 i 的当前值作为参数并立即调用它。这会为每次迭代创建一个单独的范围，确保为每个 AJAX 请求正确保留 keySearch 值。

但是，请注意，在循环中发出多个同步 AJAX 请求可能效率低下，并且可能会导致性能下降，尤其是当您有许多 URL 需要获取时。考虑使用 Promises 或 async/await 等异步方法以更高效、更有组织的方式处理请求。