for循环范围内的jQuery$.get(）

jQuery $.get() within for loop scope

本文关键字：get jQuery 循环 范围内 for      更新时间：2023-09-26

我是AJAX的新手，但在过去的两个小时里，我一直在研究它，以帮助我的场景。我没有取得任何进展（

无论如何，我的问题是，当我在$.get（…）之外时，subPages数组超出了范围。我曾尝试在代码中使用when（）和done（），但仍然无法正确执行。

我认为问题在于通过for循环的迭代，因为我在代码的多个部分中都有页面[I]。这就是为什么我不能在需要时使用when（）和done（）。

这是我的：

var subPages = [];
var containsSub = '/sites/Pages/';
var tempString = '';
// iterate through the pages array in reverse
for(var i = pages.length - 1; i >= 0; i--){
    // grab all <a> within response text
    var getLinks = $.get(baseURL + pages[i]).then(function(responseData){
        var $response = $(responseData);
        var $links = $response.find('a');
        // push each valid link into subPages array
        $links.each(function(index, $link){
            if(this.href.indexOf(containsSub) > -1){
                subPages.push(this.href);
            }
        });
        // subPages array is loaded with the correct values
        console.log("subPages inside get: " + subPages);
    });
    // empty here
    console.log("subPages outstide all: " + subPages);

编辑：添加了then链和代码，我有一个未定义的subPages[I]

var subPages = [];
        var containsSub = '/sites/Pages/';
        var tempString = '';
        // iterate through the pages array in reverse
        for(var i = pages.length - 1; i >= 0; i--){
            // grab all <a> within response text
            var getLinks = $.get(baseURL + pages[i]).then(function(responseData){
                var $response = $(responseData);
                var $links = $response.find('a');
                // push each valid link into subPages array
                $links.each(function(index, $link){
                    if(this.href.indexOf(containsSub) > -1){
                        subPages.push(this.href);
                        //console.log("<a href='"+ this.href + "'>" + this.href + "</a>" + " <br>");
                    }
                });
            console.log("subPages inside get: " + subPages);
            })
            .then(function(){
                console.log("subPages outstide all: " + subPages);
            // print bold for current main page
            tempString += "<strong><a href='"+ baseURL + pages[i] + "'>" + pages[i].substr(27,pages[i].length) + "</a><strong>" + " <br>";
            for(var i = 0; i < subPages.length - 1; i++){
                console.log("<a href='"+ subPages[i] + "'>" + subPages[i] + "</a>" + " <br>");
            }
            subPages = [];
            pages.splice(i, 1);
            })

        }

11/25编辑：我通过消除一些复杂的问题解决了下面的问题，并决定AJAX请求更符合逻辑。

var subPages = [];
    var containsSub = '/sites/it/InfoProtect/Pages/';
    var tempString = '';
    // iterate through the pages array in reverse
    for(var i = pages.length - 1; i >= 0; i--){
        // grab all <a> within response text
        var getLinks = $.ajax({
            url: baseURL + pages[i], 
            async: false,
            success: function(responseData){
                var $response = $(responseData);
                var $links = $response.find('a');
                // push each valid link into subPages array
                $links.each(function(index, $link){
                    if(this.href.indexOf(containsSub) > -1){
                        subPages.push(this.href);
                    }
                });
            }
        })

for循环立即执行循环的所有迭代。console.log的最后一行运行完毕后，将填充subPages数组。

$.get是异步的，因此在调用它之后，.then内部的代码不会立即被调用。因此，它继续到循环的下一次迭代，最终退出，并显示一个空的subpages数组，因为您的数据尚未返回。

以下是如何在记录数组（未经测试）之前等待ajax调用的快速想法：

var ajaxCalls = [];
// iterate through the pages array in reverse
for(var i = pages.length - 1; i >= 0; i--){
    // grab all <a> within response text
    var getLinks = $.get(baseURL + pages[i]).then(function(responseData){
        var $response = $(responseData);
        var $links = $response.find('a');
        // push each valid link into subPages array
        $links.each(function(index, $link){
            if(this.href.indexOf(containsSub) > -1){
                subPages.push(this.href);
            }
        });
        // subPages array is loaded with the correct values
        console.log("subPages inside get: " + subPages);
    });
    ajaxCalls.push(getLinks);
}
$.when.apply(null, ajaxCalls).then(function() {
    // not empty here
    console.log("subPages outstide all: " + subPages);
});

问题是当我在外面时，subPages数组超出了作用域$.get（…）

$.get()返回异步响应。尝试将.then()链接到$.get()以保持与初始.then() 相同的范围

var getLinks = $.get(baseURL + pages[i]).then(function(responseData){
})
.then(function() {
  console.log("subPages outstide all: " + subPages);
})

尝试在for循环中创建IIFE以通过i

例如

var pages = ["a", "b", "c"];
for(var i = pages.length -1; i >= 0; i--) {
  (function(j) {
  var dfd = $.Deferred(function(d) {
    setTimeout(function() {
      d.resolve(j)
    }, Math.random() * 1000)
  }).promise()
  .then(function(n) {
    console.log("first", n, pages[n]);
    return n
  }).then(function(res) {
    console.log("second", res, pages[res])
  })
  }(i))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

相关文章：