Как сделать что бы каждую секунду выводился div с рандомным словом

Question

подскажите пожалуйста как можно реализовать систему.

Что бы каждую секунду создавался div с рандомным текстом из заготовки. Например у меня заготовленно 1000 слов И вот каждую секкунду на сайте появлялось рандомное из этих слов и так пока список не закончится.

У меня получилось реальзовать что то подобное но я столкнулся с прбоммой с оптимицией. При выводе 200-300 div сайт начинает очень сильно тормозить, можно ли както это оптимизивароть ? Не обязательно что бы старые слова которые были выведены секунд 10 назад оставались на сайте.

Буду весьма благодарен за помощь.

Array.prototype.randomItem = function() {
    return this[Math.floor(Math.random()*this.length)];
  }
  function nametest() {
  const fruits = [
    'alien absorb amateur about almost alley appear around armed atom balcony',
    'boost brick carbon cement column connect correct couple device dinosaur edge embody endorse',
    'drill enroll fiber fish forward goddess hair ill inner laptop letter matter nation',
    'milk object quote rocket salad speed start this together video wear window',
    'pen pair high frost gate finger extend exit empower drop dinosaur crack',
    'nominee pioneer quantum pull person paddle misery master learn lunar inflict identify',
    'puzzle nominee milk young word victory transfer tide still slam soldier rice'
  ];
  const list = document.getElementById("app");
  let keys;
  for (keys in fruits) {
    list.innerHTML += `<div><span class="prcey">Sead:&nbsp;</span>${fruits.randomItem()}</div>`
  }
}
myInterval = setInterval(nametest, 10);

setInterval(function() {          
    window.scrollTo(0, document.body.scrollHeight);
}, 10);

<div id="app" class="app"></div>

Answer 1

Я бы хранил нужные данные в одномерном массиве, так проще, потому что мы можем использовать метод .splice(), чтобы удалить слово и вывести его (колбэк).

Заменить .innerHTML, т.к. в данном случае он будет слишком медленным, лучше заюзать .insertAdjacentHTML().

Ну и скроллить будем через метод .scollIntoView().

И не забываем чистить таймеры, когда они не нужны, функцией clearInterval().

const arr = ['alien', 'absorb', 'amateur', 'about', 'almost', 'alley', 'appear', 'around', 'armed', 'atom', 'balcony', 'boost', 'brick', 'carbon', 'cement', 'column', 'connect', 'correct', 'couple', 'device', 'dinosaur', 'edge', 'embody', 'endorse', 'drill', 'enroll', 'fiber', 'fish', 'forward', 'goddess', 'hair', 'ill', 'inner', 'laptop', 'letter', 'matter', 'nation', 'milk', 'object', 'quote', 'rocket', 'salad', 'speed', 'start', 'this', 'together', 'video', 'wear', 'window', 'pen', 'pair', 'high', 'frost', 'gate', 'finger', 'extend', 'exit', 'empower', 'drop', 'dinosaur', 'crack', 'nominee', 'pioneer', 'quantum', 'pull', 'person', 'paddle', 'misery', 'master', 'learn', 'lunar', 'inflict', 'identify', 'puzzle', 'nominee', 'milk', 'young', 'word', 'victory', 'transfer', 'tide', 'still', 'slam', 'soldier', 'rice']; // массив слов
const len = arr.length; // сколько слов всего

const output = document.querySelector('.words'); // Сюда выводим слова
const count = document.querySelector('.words-count'); // Сюда выводим кол-во оставшихся слов

const timer = setInterval(() => { // Записываем в переменную таймер, чтобы его можно было удалить.
  if(arr.length > 0) { // Если массив НЕ пустой
    output.insertAdjacentHTML('beforeend', `<div>${arr.splice(Math.floor(Math.random() * arr.length), 1)}</div>`); // Создаём див с рандомным словом, сразу же удаляя его из массива, див добавляем в конец элемента
    count.scrollIntoView({block: 'end'}); // Скроллим до блока, так, чтобы его низ был виден от нижней границы вьюпорта
    count.textContent = arr.length+'/'+len; // отображает сколько слов осталось в массиве
  } else clearInterval(timer); // Если массив пустой, то очищаем таймер
}, 100);

.words-count {
  border-top: 1px solid #666;
}

<div class="words"></div>
<div class="words-count"></div>

Так же можно ограничить кол-во выводимых слов, тут будет выводится не более 10

const arr = ['alien', 'absorb', 'amateur', 'about', 'almost', 'alley', 'appear', 'around', 'armed', 'atom', 'balcony', 'boost', 'brick', 'carbon', 'cement', 'column', 'connect', 'correct', 'couple', 'device', 'dinosaur', 'edge', 'embody', 'endorse', 'drill', 'enroll', 'fiber', 'fish', 'forward', 'goddess', 'hair', 'ill', 'inner', 'laptop', 'letter', 'matter', 'nation', 'milk', 'object', 'quote', 'rocket', 'salad', 'speed', 'start', 'this', 'together', 'video', 'wear', 'window', 'pen', 'pair', 'high', 'frost', 'gate', 'finger', 'extend', 'exit', 'empower', 'drop', 'dinosaur', 'crack', 'nominee', 'pioneer', 'quantum', 'pull', 'person', 'paddle', 'misery', 'master', 'learn', 'lunar', 'inflict', 'identify', 'puzzle', 'nominee', 'milk', 'young', 'word', 'victory', 'transfer', 'tide', 'still', 'slam', 'soldier', 'rice'];
const output = document.querySelector('.words');


const timer = setInterval(() => {
  if(arr.length > 0) {
    if(output.children.length >= 10) {
      output.children[0].remove(); // Если больше 10 слов, то удаляем первое.
    }
    output.insertAdjacentHTML('beforeend', `<div>${arr.splice(Math.floor(Math.random() * arr.length), 1)}</div>`);
  } else clearInterval(timer);
}, 100);

.words {counter-reset: a;}
.words > div {counter-increment: a;}
.words > div::before {
  content: counter(a);
  display: inline-block;
  width: 2ch;
  margin-right: 5px;
  text-align: right;
}

<div class="words"></div>

БЛОГ НА HUSL

Как сделать что бы каждую секунду выводился div с рандомным словом

Ответы (1 шт):