Что случилось с тем, как я использую setInterval()?

Я хочу напечатать абзац, содержащий термины, которые динамически изменяются каждую секунду с использованием метода JavaScript setInterval.Что случилось с тем, как я использую setInterval()?

Меняющиеся термины находятся в массиве, который я хочу перебрать. Проблема в том, что вместо повторения каждого члена в массиве и его отображения отображается только последний член в массиве.

Вот код:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <style> 
      #changingText{ 
       color: blue; 
       font-size: 2.8em; 
      } 
     </style> 
    </head> 
    <body> 
     <p>Hello! I am a <span id="changingText">person</span></p> 

     <script> 
      var changingText = document.getElementById('changingText'); 

      var things = ['Rap fan', 'runner', 'male', 'basketball player', 'mammal']; 

      setInterval(changeText, 1000); 

      function changeText() { 
       for(var i = 0; i < things.length; i++) { 
        changingText.innerHTML = things[i]; 
       } 

      } 


     </script> 
    </body> 
</html>

Что я делаю неправильно?

источник

2016-01-09 Adrian

каждый второй весь 'changeText()' выполняется. Поэтому каждый раз, когда вы зачитываете все «вещи» один за другим. – Sirko

На ваш вопрос ответили? Если вы не согласитесь принять ответ, который вы использовали, чтобы другие не тратили время. Спасибо за понимание. – Trevor

На мой вопрос был дан ответ, и я прокомментировал первый ответ, который работал отлично. – Adrian

Вы для контура работает в changeText обратного вызова. Каждой секунде он вызывается и меняет текст на все things, что происходит так быстро, что видно только последний элемент.

Правильный подход состоял в том, чтобы отслеживать «текущий» элемент для отображения и обновления при каждом вызове обратного вызова.

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

var i = 0; 
function changeText() { 
    changingText.innerHTML = things[i]; 
    i = (i+1) % things.length; // "wrap around" the index when array bound is reached 
}

Вы можете избавиться от прилавка ALLtogether:

function changeText() { 
    changingText.innerHTML = things[0]; // always take currently first item 
    things.push(things.shift()); // rotate items in array (put first to back) 
}

источник

2016-01-09 20:36:05 tsterker

Проблема в том, что ваш цикл for-loop перебирает каждый элемент массива каждый раз, когда вызывается вашим интервалом. Вместо этого мы хотим просто увеличивать i, отображать результат, а затем выходить из функтона до тех пор, пока не будет вызван интервал.

Вот рабочий Демо:

var changingText = document.getElementById('changingText'); 
 

 
var things = ['Rap fan', 'runner', 'male', 'basketball player', 'mammal']; 
 

 
setInterval(changeText, 1000); 
 

 
var i = 0; 
 

 
function changeText() { 
 
    changingText.innerHTML = things[i]; 
 
    i++; 
 
    if (i >= things.length) i = 0; 
 
}

#changingText { 
 
    color: blue; 
 
    font-size: 2.8em; 
 
}

<p>Hello! I am a <span id="changingText">person</span></p>

источник

2016-01-09 20:18:09

Одна проблема, когда индекс выходит за пределы массива, пытаясь решить эту проблему здесь. –

@AdamAzad Уже впереди. Отредактировано для использования проверки границ. –

Спасибо! Это прекрасно работает. – Adrian

Изменение текста функция выполняется каждый второй, то цикл выполняется каждый раз, когда от нуля до длины, а затем устанавливает последний элемент, как текст. Вы должны извлекать переменную i и увеличивать на единицу при каждом вызове функции. Проверьте, если он находится вне границ, то сделать это нолем ..

источник

2016-01-09 20:24:35

Вот укороченный и рабочего код

  var changingText = document.getElementById('changingText') 
 
       ,things = ['Rap fan', 'runner', 'male', 'basketball player', 'mammal']; 
 

 
      var i=0; 
 
      setInterval(function(){ 
 
       
 
       if(things.length > i){ 
 
      \t \t changingText.innerHTML = things[i]; 
 
      \t \t i++; 
 
       } 
 
      }, 1000); 
 
\t \t \t \t \t \t

<p>Hello! I am a <span id="changingText">person</span></p>

источник

2016-01-09 20:27:26

Что случилось с тем, как я использую setInterval()?

ответ

Смежные вопросы