Как продолжить изменять элемент с помощью цикла Loop

Question

Я пытался отобразить кучу букв, которые постоянно меняются.Они меняются только каждый раз, когда я перезагружаю страницу.Пожалуйста, помогите.

    const action = false;
    var i = 0; 
    
    function randomized() {
      var text = "";
      var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
      const still = document.getElementById('c1');
      const still2 = [document.getElementById('c1'),document.getElementById('c2'),document.getElementById('c3'),document.getElementById('c4'),document.getElementById('c5'),document.getElementById('c6'),document.getElementById('c7'),document.getElementById('c8'),document.getElementById('c9'),document.getElementById('c10'),document.getElementById('c11'),document.getElementById('c12')]
    
    while (action === false) {
    	i++;
    	var letter = possible.charAt(Math.floor(Math.random() * possible.length));
    	still2[i].innerHTML = letter;
    }
      /*for(var i = 0; action === false; i++){
      	var letter = possible.charAt(Math.floor(Math.random() * possible.length))
        still2[i].innerHTML = letter;
    	};*/
    }

Answer 1

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

function setRandomLetter() {
  const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  const still = document.getElementById('c1');
  const letter = possible.charAt(Math.floor(Math.random() * possible.length));

  still.innerText = letter;
}

// set a random letter every second
setInterval(setRandomLetter, 1000);

<span id="c1"></span>

Answer 2

Как уже упоминалось в другом ответе, цикл while заблокирует основной поток и никогда не будет ничего визуализировать.Я предлагаю использовать функцию requestAnimationFrame() для постановки в очередь обновлений элементов.

Ниже приведено подтверждение концепции, которую можно адаптировать к конкретному случаю:

• Функция для генерации случайного символа
• Глобальный пользовательский <span> селектор для простоты
• Функция для циклического перемещения по элементам, обновления их содержимого и бесконечной очереди следующего кадра.
• Для демонстрационных целей остановите цикл через 2 секунды.Обратите внимание на то, как анимация последнего кадра записывается и используется для остановки бесконечного цикла.

// Generate random letter
function randomLetter() {
  const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  return possible.charAt(Math.floor(Math.random() * possible.length));
}

// Id to stop the animation frame loop
let animationId = 0;

// Update all nodes at the same time
function updateNodes() {
  // List all nodes to update
  let nodes = document.getElementsByTagName('span');

  for (let i = 0; i < nodes.length; i++) {
    nodes[i].innerHTML = randomLetter();
  }

  // Queue the next update
  animationId = requestAnimationFrame(updateNodes);
}

// Start the animation loop
animationId = requestAnimationFrame(updateNodes);

// Stops animation after 2 seconds
setTimeout(function(){
  cancelAnimationFrame(animationId);
}, 2000);

<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

Answer 3

Вызовите метод загрузки вашей страницы внутри window.onload и используйте localStorage

 window.onload = function() { 
        randomized(localStorage.getItem("randomString"));// Retrieve
 }

function randomized(preRandomString){
    // Store and update localStorage
    return prvRandomString + localStorage.setItem("randomString", "abc123");
}