Блог

Главная - Вопросы по программированию - object.innerHTML не обновляется должным образом?

object.innerHTML не обновляется должным образом?

#javascript #html #progress-bar

#javascript #HTML #индикатор выполнения

Вопрос:

Я пытался создать индикатор выполнения в javascript, но он не загружался, пока моя программа не была завершена. Как я могу заставить его обновляться, пока программа все еще запущена?

 <!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
    <div id="main" onclick="my()">1</div>
    <button onclick="myFunction()">start</button>
    <script>
       function myFunction() {
         for(var i=0;i<1000000;i  ){
            document.getElementById("main").innerHTML=i;
         }
       }
    </script>
</body>
</html>

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

1. использовать setInterval

Ответ №1:

Используйте setInterval метод, который выполняется в фоновом режиме без блокировки. После достижения условия вы можете очистить интервал с помощью clearInterval метода.

 function myFunction() {
  // get element reference and cache in a variable
  let main = document.getElementById("main"),
    // initialize i as 0
    i = 0;
  // keep interval reference for clearing once i reached 1000000
  let intrvl = setInterval(() => {
    // check value of i and increment, if reached 1000000 clear the interval
    if (i   === 1000000) clearInterval(intrvl);
    // update the content of main element
    main.innerHTML = i;
  }, 1000); // set required delay in millisecond, any value lesser than 10 will be automatically converts to 10
}
  

 <!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <div id="main" onclick="my()">1</div>
  <button onclick="myFunction()">start</button>
  <script>
    function myFunction() {
      let main = document.getElementById("main"),
        i = 0;
      let intrvl = setInterval(() => {
        if (i   === 1000000) clearInterval(intrvl);
        main.innerHTML = i;
      },1000);
    }
  </script>
</body>

</html>

Ответ №2:

Я использовал setInterval вместо for cicle и я использовал parseInt() , чтобы получить целочисленное значение вашего div innerHTML, а затем увеличить его

setInterval(myFunction, 1000) выполняется myFunction() каждые 1000 миллисекунд

 <!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
    <div id="main" onclick="my()">1</div>
    <button onclick="setInterval(myFunction, 1000)">start</button>
    <script>
       function myFunction(){
            var value = parseInt(document.getElementById("main").innerHTML);
            document.getElementById("main").innerHTML=value 1;
         }
    </script>
</body>
</html>