1

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

Что бы каждую секунду создавался 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>
5
  • 1
    Покажи код который сделал и покажи на нём что не так 5 янв 2023 в 17:35
  • Ну просто при создании <div>'а, также создавайте таймаут который через 10 сек. удалит сам <div>.
    – ΝNL993
    5 янв 2023 в 17:40
  • Вот тут код jsfiddle.net/z2p9yxbu/4 5 янв 2023 в 17:49
  • добавляйте код в сам вопрос, а не ссылкой на сторонний ресурс 5 янв 2023 в 17:51
  • 1
    Получается что в div id="app" каждую секунду внутрь добавляется новый div, зачем? Если нужно только одно слово, почему бы просто не заменять содержимое знаком = а не добавлять новое знаком +=? 5 янв 2023 в 18:23

1 ответ 1

2

Я бы хранил нужные данные в одномерном массиве, так проще, потому что мы можем использовать метод .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>

5
  • 1
    Не знаю это только у меня или нет, но когда я запускаю первый код, то я не могу скроллить мышкой основную страницу
    – EzioMercer
    5 янв 2023 в 23:06
  • 1
    @EzioMercer у меня та же проблема, хотя скрипт вроде бы должен работать в рамках <iframe>.
    – ΝNL993
    6 янв 2023 в 9:38
  • 1
    @EzioMercer, прикол метода 🤪
    – De.Minov
    6 янв 2023 в 10:44
  • @ΝNL993, хоть вашу правку отклонили на проверке, спасибо за неё, я исправил ошибку)
    – De.Minov
    6 янв 2023 в 10:49
  • @De.Minov не за что, обращайтесь :)
    – ΝNL993
    6 янв 2023 в 14:49

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.