Question

我已经使用AJAX访问了GitHub用户的5个关注者。我正在尝试在前5个关注者中每个深入三个级别，每个返回5个关注者。因此，最初，返回5个关注者，然后针对五个关注者中的每一个进行三个级别的深入研究，每个级别又返回5个关注者。

我将如何处理？递归？嵌套循环？

此外，当我呈现前五个跟随者时，它们将全部呈现在html的同一行中。试图在每个循环上简单地添加一个html break标记，但似乎不起作用。

谢谢。

$(function() {
  $("#submitbtn").on("click", function(e) {
    e.preventDefault();

    var username = $("#userID").val();

    console.log("username " + username);

    var userFollower =
      "https://api.github.com/users/" + username + "/followers";

    $.getJSON(userFollower, function(data) {
      console.log(data);

      for (i = 0; i < 5; i++) {
        var br = "<br>";
        var follower = data[i].login;
        console.log("Follower " + follower);
        $(".follower").append(follower);
        $(".container").append(br);
      }
    });
  });
});

Answer 1

这里是使用一些基本递归的示例。请注意，我还修改了DOM操作，以使每个关注者都在其自己的div中换行。

我将深度设置为3，以便将点击次数限制为github。

更新[1]

注意到您希望深度分别为3和5个关注者，并且这些数字未链接。修改了代码段，以使这些数字彼此互不关联。

var depth = 3;
var number_per_level = 5;
//var tst = [10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
$(function() {
  $("#submitbtn").on("click", function(e) {
    e.preventDefault();

    var username = $("#userID").val();
    getFollowers(0, $(".container"), username);

  });
});

function getFollowers(count, $container, username) {
  if (count >= depth) {
    return false;
  }
  //console.log("username " + username);

  var userFollower =
    "https://api.github.com/users/" + username + "/followers";

  $.getJSON(userFollower, function(data) {
    //console.log(data);

    for (let i = 0; i < number_per_level; i++) {
      var follower = data[i].login; //tst[i]; //data[i].login;
      var $mine = $("<div class='follower'>");
      //console.log(`Follower ${follower} follows ${username}`);
      $mine.append(follower).appendTo($container);
      getFollowers(count + 1, $mine, follower);
    }
  });
}

.follower {
  padding-left: 1em;
  border: 1px solid #c0c0c0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="userID" value="tim" /><button id="submitbtn">GO</button>
<div class="container"></div>

Answer 2

如果您知道必须深入多少个级别，那么最好采用嵌套循环而不是递归。

    var git = [{
        name: 'a',
        fol: [{
            name: 'b',
            fol: [{
                name: 'c'
            }]
        }]
    }, {
        name: 'r',
        fol: [{
            name: 't',
            fol: [{
                name: 'e'
            }]
        }]
    }];
    
    git.forEach((firstlevel) => {
        console.log(firstlevel.name);
        firstlevel.fol.forEach((seclevel) => {
            console.log(seclevel.name);
            seclevel.fol.forEach((thirdlevel) => {
                console.log(thirdlevel.name);
            });
        });
    });

对递归的不正确处理会导致无限调用，并可能导致javascript堆内存不足。而且循环比递归快。

检索多个级别，API

2 个答案: