javascript - 如何在 for 循环中使用 AJAX-6ren

javascript - 如何在 for 循环中使用 AJAX

转载作者：行者123 更新时间：2023-12-02 16:50:16

我想使用第一次 AJAX 调用中获得的新 URL 来调用另一个 AJAX 函数。但如果我尝试这样的 for 循环，它就会失败。我认为 for 循环不会等到 AJAX 完成其工作，但我不知道如何对抗它。有什么建议么？

    <!DOCTYPE html>
            <html>
        <head>
            <title>Example</title>
            <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
            <link rel="stylesheet" href="bootstrap.min.css">
            <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
            <style>
        body{
            background-color: #D4DAD8;

        }
        #content {
        margin-left: auto;
        margin-right: auto;
        margin-top: 10px;
        }
        #kastid{
        background-image: -ms-linear-gradient(top left, #FFFFFF 0%, #EDEDED 100%);
        background-image: -moz-linear-gradient(top left, #FFFFFF 0%, #EDEDED 100%);
        background-image: -o-linear-gradient(top left, #FFFFFF 0%, #EDEDED 100%);
        background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #EDEDED));
        background-image: -webkit-linear-gradient(top left, #FFFFFF 0%, #EDEDED 100%);
        background-image: linear-gradient(to bottom right, #FFFFFF 0%, #EDEDED 100%);
        padding: 3px 3px;
        height: 400px;
        }
            </style>
        </head>
        <body>

           <div id="content"></div>

        <script type="text/javascript">
        var url1 = "https://www.readability.com/api/content/v1/parser?url=";
        var urltoken = "&token=18ba7d424a0d65facdaea8defa356bc3e430f8ce";
        var i = 0;
        var link = [];
        var finalurl = [];
        var pubDate = [];
        $.ajax({
            url:'https://www.readability.com/rseero/latest/feed',
            dataType:'xml',
            type:'GET',
            success:function(xml) {
                 $(xml).find('item').each(function() {
                    pubDate[i] = $(this).find("pubDate").text();                
                    link[i] = $(this).find("link").text();           
                    finalurl[i] = url1 + link[i] + urltoken; 
                    console.log(i);
                    console.log(finalurl[i]);
                    console.log(link[i]);
                    i++;
                 });
            },
            error:function() {
                alert("Feed error.1.!");
            }
        }).done(function () {
            for(i = 0; i < finalurl.length; i++) {
            getInfo(i);
        }
        });
        function getInfo(i) {
        $.ajax({
            url:finalurl[i],
            dataType:'xml',
            type:'GET',
            success:function(xml) {
                console.log(finalurl[i]);
                var title = $(this).find("title").text();
                var content = $(this).find("content").text();
                $("#content").append('<div class="col-md-4 col-xs-12" id="kastid"><a href="'+link[i]+'">'+title+'</a><p><p>'+pubDate[i]+'<p><p>'+description);
            },
            error:function() {
                console.log(finalurl[i]);
                alert("Feed error..!");
            }
        });
        }
        </script>
        </body>
        </html>