Блог

Главная - Вопросы по программированию - Как добавлять элементы один за другим и обновлять в браузере с помощью javascript?

Как добавлять элементы один за другим и обновлять в браузере с помощью javascript?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Итак, как показано ниже, у меня есть функция, которая выполняется при нажатии кнопки, и она добавляет в документ 30 элементов div с некоторыми атрибутами.

 var bar_counter = 0;
bar_lengths = new Array();
function createBar(btnObj)
{
    while(bar_lengths.length < 30){
        var size =  Math.floor(Math.random() * (50 - 1) )   1;
        
        if(size>50)
        {
            alert("Please enter a value between 1 and 50 only!");
        }
        else{
            if(bar_lengths.indexOf(size) === -1){
                bar = document.createElement("div");
                bar_counter = parseInt(bar_counter)   parseInt(1);
                bar.setAttribute("class","bars");
                bar.setAttribute("name","bar" bar_counter);
                bar.setAttribute("id",size);
                bar.style.height=10*size "px";
                var color1 = '#' (0x1000000 (Math.random())*0xffffff).toString(16).substr(1,6);
                var color2 = '#' (0x1000000 (Math.random())*0xffffff).toString(16).substr(1,6);
                
                bar.style.backgroundImage="linear-gradient(359deg," color1 "," color2 ")";
                bar.insertAdjacentHTML("beforeend","<font color='red' style='vertical-align: text-bottom; background-color:white'>" size "</font>");
                bar.insertAdjacentHTML("beforeend","<font color='red' style='vertical-align: text-bottom; background-color:white'> </font>");
                var place_to_insert = document.getElementById("placeBars");
                place_to_insert.appendChild(bar);
                bar_lengths.push(size);
            }
        }
    }
    btnObj.disabled=true;
    temp="";
    for(var i= 0; i < bar_lengths.length; i  ) {
        temp = temp bar_lengths[i] " , ";
    }
    document.getElementById("YourArray").innerHTML = temp;
}

Он работает отлично, но при нажатии кнопки окно браузера мгновенно заполняется 30 элементами div.
Что я хочу сделать, так это добавить задержку в этот цикл, чтобы показать, что они добавляются один за другим в окне. Как я могу это сделать? Я пытался использовать функции setTimeout() и setInterval() , но это не сработало. TIA.

~ с уважением

Комментарии:

1. с некоторой задержкой по времени это станет асинхронным процессом, и с последствиями придется справляться

2. Есть какие-либо подсказки о том, как добавить эту задержку в этот цикл?

Ответ №1:

Вы можете использовать эту вспомогательную функцию, чтобы «приостановить» выполнение вашего кода на нужную вам продолжительность:

 function timeout(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

и затем await timeout(3000) .

Обратите внимание, что внешняя функция должна быть async для того, чтобы использовать await ее внутри

Комментарии:

1. Браво! Это работает как шарм! Очень признателен 🙂

Ответ №2:

Цикл с задержкой простой метод…

 const loopCountMax = 30
  ;
let loopCount   = 1  
  , refInterval = setInterval(() =>
      {
        // code of your stuff
        // ...

      if (  loopCount > loopCountMax  ) clearInterval(refInterval)
      }
      , 1000); // delay value
Метки: