Обновление интерфейса в цикле скрипта

@Yologamer · Регистрация: 25.09.2016

Студворк — интернет-сервис помощи студентам

Доброго дня, столкнулся с такой необходимостью, как если скрипт выполняется очень долго - процесс выполнения отображался на экране страницы. В теле цикла добавлю через innerHTML текст, но он отображается только в конце выполнения скрипта. Вот код:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html> 
<html> 
 
<body> 
<input type = "number" id = "input_number">
<button onclick = "isInteger()">Test</button>
<p>Простые числа:</p><p id="SimpleNumb"></p>
 
<script> 
function isInteger() {
    var num = +document.getElementById("input_number").value;
return !((num ^ 0) === num) ? alert("Вы ввели не целое число") : (num < 100000) ? SimpleNumbers(num) : alert("Число больше 1000");
}
function SimpleNumbers(num) {
 
  nextPrime:
  for (var i = 2; i <= num; i++) {
 
    for (var j = 2; j < i; j++) {
      if (i % j == 0) continue nextPrime;
    }
  document.getElementById("SimpleNumb").innerHTML += i + ", ";
  }
}
 
</script> 
</body> 
</html>

Буду благодарен, если кто поможет.

Qwerty_Wasd · 03.03.2019, 16:49

Yologamer, один из вариантов тормознуть - https://codepen.io/qwerty_wasd/pen/eXzYpO

JavaScript
1
2
3
4
5
6
7
let count = 100;
(function t() {
    if (count--) {
     document.getElementsByTagName("span")[0].textContent += "i";
      setTimeout(t, 100);
    }
})();

@Yologamer · 04.03.2019, 12:42 **[ТС]**

Сообщение от Qwerty_Wasd

Yologamer, один из вариантов тормознуть - https://codepen.io/qwerty_wasd/pen/eXzYpO

На вашем примере работает отлично, правда когда я начал переносить в свой код - стали появляться какие-то проблемы и участок с этим кодом просто не считывается. Не могли бы помочь внедрить этот код в мою функцию, я буду очень признателен.

Qwerty_Wasd · 04.03.2019, 20:36

Yologamer, внедрять в Вашу не буду, простите - иначе вижу решение задачи нежели Вы.
Например, проверка на простоту числа даже простым перебором делителей происходит быстрее и понятнее, чем тот бред, что Вы слямзили у Кантора. Это я про

JavaScript
1
2
3
4
5
6
nextPrime:
  for (var i = 2; i <= num; i++) {
 
    for (var j = 2; j < i; j++) {
      if (i % j == 0) continue nextPrime;
    }

Да и вот от этого

JavaScript
1
2
3
4
function isInteger() {
    var num = +document.getElementById("input_number").value;
return !((num ^ 0) === num) ? alert("Вы ввели не целое число") : (num < 100000) ? SimpleNumbers(num) : alert("Число больше 1000");
}

можно себя избавить, просто изменив тип инпута.

Короче - https://codepen.io/qwerty_wasd/pen/BbLNGZ

HTML5
1
2
3
4
<input id="num" type="number"/>
<button id="bt">test</button>
<p>простые числа:</p>
<p id="result"></p>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
let opPrime = {
  startBt: document.getElementById('bt'),
  count: document.getElementById('num').value || 100,
  max: document.getElementById('num').value || 100,
  result: document.getElementById('result'),
  timeID: 0,
  isPrime: function(num) {
    if(num < 2) return false;
    for (var i = 2; i < num; i++) {
      if(num % i == 0) return false;
    }
    return true;
  },
  events: {
    bClick: function t() {
      this.disabled = true;
      if (opPrime.count--) {
        opPrime.result.textContent += opPrime.isPrime(opPrime.max - opPrime.count) ? opPrime.max - opPrime.count + ' ' : '';
        opPrime.timeID = setTimeout(t, 200);
      } else {
        clearTimeout(opPrime.timeID);
        this.disabled = false;
      }
    },
  },
}
opPrime.startBt.addEventListener('click', opPrime.events.bClick);

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

Обновление интерфейса в цикле скрипта

Решение