Проблема с бесконечным циклом при манипулировании DOM - PullRequest
Новая
       6

Проблема с бесконечным циклом при манипулировании DOM

0 голосов
/ 17 ноября 2018

Я изучаю манипуляции с DOM и, на практике, я пытаюсь найти первых 100 пользователей Твиттера, которые просмотрели около # 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 секунды и ищу имена пользователей, пока у меня не будет 100 или более из них в моей переменной usernames. 

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 входит в цикл infinte, и я не знаю почему.Я думаю, что логика кода верна.На самом деле, если я сначала скопирую и вставлю все объявленные функции в консоль браузера, затем запустите интервал scrollPage и, наконец, запустим цикл while, он будет работать хорошо.Проблема возникает, когда я копирую и вставляю весь код одновременно в консоль браузера.Это похоже на выполнение интервала и цикла while.Но я не могу понять.

1 Ответ

0 голосов
/ 17 ноября 2018

Лучше иметь такое состояние: 

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();
...