操作 DOM 时出现无限循环的问题

Question

我正在学习 DOM 操作，并且为了练习，我正在尝试吸引前 100 名 Twitter 用户在推特上发布 #Javascript（请参阅链接）。由于目前 Twitter 不允许您在浏览器控制台中使用 console.log() 函数，因此我设法在 HTML 中直观地显示任何字符串，在这种情况下，在搜索文本框下。

这是我的“自定义”console.log()

function consoleLog(data) {
    var searchTextBox = document.querySelector("#doc > div.topbar.js-topbar > div > div > div > div > div");
    var p = document.createElement("p");
    var innerText = document.createTextNode(data);
    p.appendChild(innerText);
    searchTextBox.appendChild(p);
}

为了获取用户名，我每 4 秒滚动一次页面并查找用户名，直到我的 usernames 变量中有 100 个或更多用户名。

var scrollPage = setInterval(function() {
    window.scrollTo(0, document.body.scrollHeight);
}, 4000);

var usernames = [];
while (true) {    // <------ PROBLEM
    if (usernames.length < 100) {
        consoleLog("Getting usernames again");
        usernames = getUsernames();
    }
    else {
        consoleLog("We have ENOUGH usernames. BREAK");
        clearInterval(scrollPage);
        printUsernames();
        break;
    }
}

function printUsernames() {
    for(var user of usernames) {
        consoleLog(user);
    }
}

function getUsernames() {
    var results = [];
    var usernameNodes = document.getElementsByClassName("username u-dir u-textTruncate");

    var username = usernameNodes[0].textContent;
    for(var node of usernameNodes) {
        results.push(node.textContent);
    }

    return results.filter(isUnique);
}

function isUnique(value, index, self) { 
    return self.indexOf(value) === index;
}

问题是while 循环进入了无限循环，我不知道为什么。我认为代码的逻辑是正确的。事实上，如果我首先将所有声明的函数复制并粘贴到浏览器控制台，然后启动scrollPage 间隔，最后启动while 循环，它运行良好。当我在浏览器控制台中一次复制并粘贴所有代码时，问题就出现了。这就像间隔的执行和while循环在某种程度上发生冲突。但我看不懂。

Answer 1

最好有这样的条件：

var usernames = [];
// This will automatically end when length is greater or equall 100
// no need to break
while (usernames.length < 100) {
  consoleLog("Getting usernames again");
  usernames = getUsernames();
}
consoleLog("We have ENOUGH usernames.");
clearInterval(scrollPage);
printUsernames();