Как отображать один номер за другим в браузере - PullRequest
Новая
       5

Как отображать один номер за другим в браузере

0 голосов
/ 27 мая 2018

Я пытаюсь создать некоторый код, который будет отображать случайные числа одно за другим с интервалом в 1,5 секунды между изменениями чисел.Я попробовал это около миллиона разных способов на данный момент, и ни один из них не работает.Я очень обескуражен, потому что я изучал код в течение нескольких месяцев и думал, что освоил простые вещи, подобные этой.Во всяком случае, вот код: 

var javascriptElement = "numbers-display";
var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

//This function takes a single argument and displays it in the browser.
function displayContent (content) {
  document.getElementById(javascriptElement).innerHTML = content;
};

function runRandomNumbers (array) {
  displayContent(array[Math.floor(Math.random()*10)]);
};

function runOnInterval(content) {
  setInterval(content, 1500);
};

runOnInterval(runRandomNumbers(numbers));

Кто-нибудь может сказать мне, что с этим не так?Большое спасибо!

Ответы [ 3 ]

0 голосов
/ 27 мая 2018

setInterval ожидает (callback-) функцию, которую должна вызывать.Таким образом, имя-функции или анонимная функция.

Либо 

function doEverySecondAndHalf() {
    runRandomNumbers(numbers);
}
runOnInterval(doEverySecondAndHalf); // Note the missing () after doEverySecondAndHalf

Или 

runOnInterval(function() {
    runRandomNumbers(numbers);
});
0 голосов
/ 27 мая 2018

.setInterval () требует, чтобы ей передавалась функция ссылка , а не операторы.

Когда компилятор JavaScript сначала читает код, оператор runRandomNumbers(numbers) выполняется немедленно (поэтому вы получаете одно случайное число, сгенерированное и выводимое на экран), а затем возвращаемое значение из него (которое undefined) - это то, что фактически передается и сохраняется как обратный вызов таймера.Когда таймер достигает своего интервала, вызывать нечего (undefined), поэтому функция запускается один раз, и вы видите одно число, но тогда все.

Решение состоит в том, чтобы обернуть код, который вы хотите выполнить, в которомрегулярные интервалы в функции, так что эта ссылка на функцию может быть передана в .setInterval().

Кроме того, если вы хотите показать список сгенерированных чисел, вам нужно установить содержимое элемента с помощью += если вы хотите сохранить старое значение и просто объединить его.

ПРИМЕЧАНИЯ:

  • В ваших функциях есть большое разделение, которое на самом деле не добавляет никакихзначение в коде, и, вместо этого, усложняет отслеживание.
  • Используйте .innerHTML, только когда строка, которую вы устанавливаете / получаете, содержит HTML, потому что это заставляет браузер анализировать строку для HTML, который являетсяпустая трата ресурсов, когда нет HTML.Вместо этого используйте .textContent для получения / установки строк, которые не содержат HTML. 

var element = document.getElementById("numbers-display");
var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

//This function takes a single argument and displays it in the browser.
function runRandomNumbers (array) {
    element.textContent += array[Math.floor(Math.random()*10)];
}

// A function is expected as the argument here. That function
// will be stored as the callback for the timer.
function runOnInterval(callbackFunction) {
  setInterval(callbackFunction, 1500);
}

// We'll pass a function as the datat for the argument
runOnInterval(function(){ runRandomNumbers(numbers) });
<div id="numbers-display"></div>
0 голосов
/ 27 мая 2018

Вам нужно передать функцию runRandomNumbers в runOnInterval(), а не в ее возвращаемое значение runRandomNumbers(numbers).Смотрите код ниже: 

var javascriptElement = "numbers-display";
var numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

//This function takes a single argument and displays it in the browser.
function displayContent (content) {
  document.getElementById(javascriptElement).innerHTML = content;
};

function runRandomNumbers (array) {
  displayContent(array[Math.floor(Math.random()*10)]);
};

function runOnInterval(fn, numbers) {
  setInterval(function() { fn(numbers) }, 1500);
};

runOnInterval(runRandomNumbers, numbers);
<div id="numbers-display"></div>

Кроме того, я изменил runOnInterval, чтобы он принимал функцию и массив чисел в качестве аргументов.

...