HTML-страница не обновляется, пока работает функция JavaScript - PullRequest
Новая
       1

HTML-страница не обновляется, пока работает функция JavaScript

1 голос
/ 10 марта 2019

хром, фф.Opera и, возможно, другие браузеры показывают только 100000 в конце процесса, но я хочу видеть их в последовательности 1..2..3..4 ... 100000.Этот код не работает хорошо: 

<html>
<head>
</head>
<body>

<button type="button" onclick="showSequence();">Show the numbers one at a time!</button>
<p id="herethenumbers">00</p>

<script>
function showSequence() {                   
    el = document.getElementById('herethenumbers'); 
    for(var nn=0;nn<=100000;nn++){  
        el.innerHTML = nn;      
    }
}
</script>
</body>
</html>

window.setTimeout невозможно, если вы не знаете время выполнения данного процесса и даже не меняете атрибуты основного объекта div (видимостьнапример) не работает для меня.

Спасибо вообще.

ОБНОВЛЕНИЕ

Здесь частичное решение.

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

<html>
<head>
</head>
<body>

<button type="button" onclick="executeMultiLongProcess();">Launch and monitoring long processes!</button>
<p id="statusOfProcess"></p>

<script>
var el = document.getElementById('statusOfProcess'); 

function executeMultiLongProcess() {                   
    processPart1();
}
function processPart1() {
    el.innerHTML = "Start Part 1"; 
    setTimeout(function(){ 
        for(var nn=0;nn<=100000000;nn++){  //.. 
        }
        el.innerHTML = "End Part 1";        
        window.setTimeout(processPart2, 0);     
    },10);
}
function processPart2() {
    el.innerHTML = "Start Part 2"; 
    setTimeout(function(){ 
        for(var nn=0;nn<=100000000;nn++){  //.. 
        }
        el.innerHTML = "End Part 2";
        window.setTimeout(processPartN, 0);
    },10);
}
function processPartN() {
    el.innerHTML = "Start Part N"; 
    setTimeout(function(){ 
        for(var nn=0;nn<=100000000;nn++){  //.. 
        }
        el.innerHTML = "End Part N"; 
    },10);
}
</script>
</body>
</html>

Ответы [ 4 ]

2 голосов
/ 11 марта 2019

Я хочу предложить использовать window.requestAnimationFrame вместо setTimeout или setInterval, так как это позволяет вам ждать, пока браузер отобразит изменения, и сразу после этого выполнить некоторый код.В общем, вы можете сделать: 

window.requestAnimationFrame( () => {
  el.innerHTML = nn;
} );

Я изменил вашу функцию, чтобы она была рекурсивной.Таким образом, я могу вызвать функцию для визуализации следующего числа внутри обратного вызова window.requestAnimationFrame.Это необходимо, так как мы должны подождать, пока браузер отобразит текущий номер, и сразу после этого дать указание браузеру отобразить следующий номер.Использование window.requestAnimationFrame внутри цикла for не будет работать. 

el = document.getElementById( 'herethenumbers' );

function showSequence( nn=0 ) {                   
  if( nn <= 100000 ) {
    window.requestAnimationFrame( () => {
      el.innerHTML = nn;
      showSequence( nn + 1 );
    } );
  }
}
<button type="button" onclick="showSequence();">
    Show the numbers one at a time!
</button>

<p id="herethenumbers">00</p>
1 голос
/ 11 марта 2019

Использовать window.setInterval : 

function showSequence() {                   
    var el = document.getElementById('herethenumbers');
    var nn = 0;
    var timerId = setInterval(countTo100, 80); 
    function countTo100(){  
        el.innerHTML = nn;
        nn++;
        if (nn>100) clearTimeout(timerId);      
    }
}
<button type="button" onclick="showSequence();">
   Show the numbers one at a time!
</button>
<p id="herethenumbers">00</p>

Обновление

сценарий немного другой.У вас есть процесс javascriot, который запускается и заканчивается без перерывов, он может работать несколько минут, а внутри него должен отображать на экране статус своего прогресса.

JavaScript является однопоточным во всехсовременные реализации браузера 1 .Практически весь существующий (по крайней мере весь нетривиальный) код javascript сломался бы, если бы движок JavaScript браузера запускал его асинхронно.

Рассмотрите возможность использования Web Workers , явного стандартизированного API для нескольких-попутывание кода JavaScript.

Web Workers - это простое средство для веб-контента запускать сценарии в фоновых потоках.Рабочий поток может выполнять задачи без вмешательства в пользовательский интерфейс.Кроме того, они могут выполнять ввод-вывод с использованием XMLHttpRequest (хотя атрибуты responseXML и channel всегда имеют значение null).После создания работник может отправлять сообщения в код JavaScript, который его создал, отправляя сообщения в обработчик событий, указанный этим кодом (и наоборот).

Для получения дополнительной информации см. Справочник по MDN Web API- Web Workers .

0 голосов
/ 11 марта 2019

Использование requestAnimationFrame в соответствии с предложением Jan-Luca Klees - это решение моей проблемы, вот простой пример использования requestAnimationFrame.Позволяет запускать один или несколько длительных процессов с взаимодействием с объектами на экране (например, всплывающее окно или другие), requestAnimationFrame сообщает браузеру, что вы хотите запустить анимацию, и вы хотите, чтобы браузер вызывал определенную функцию для обновленияанимация. 

<html>
<head>
</head>
<body>

<button type="button" onclick="startProcesses();">Start long duration process!</button>
<p id="status">Waiting to start processes</p>

<script>
el = document.getElementById('status');

var current_process = 1;
var total_process = 2; 
var startEnd = 'S';

function startProcesses() {                   

    function step(timestamp) {
        if(current_process==1 && startEnd=='E') res = process1();
        if(current_process==2 && startEnd=='E') res = process2();       
        //..n processes

        if(startEnd=='S') el.innerHTML = "Process #"+current_process+" started..";
        if(startEnd=='E') el.innerHTML = "Process #"+current_process+" "+res;

        if(startEnd=='S' || current_process<total_process) {
            if(startEnd=='E') current_process++;
            startEnd = (startEnd=='S'?'E':'S'); 
            window.requestAnimationFrame(step);     
        }else{
            el.innerHTML = "Process #"+current_process+" "+res;
        }
    }
    window.requestAnimationFrame(step);
}

function process1() {                
    for(var nn=0;nn<=10000;nn++){  
        console.log(nn);
    }
    return "Success!"; //or Fail! if something went wrong
}
function process2() {                                
    for(var nn=0;nn<=10000;nn++){  
        console.log(nn);
    }
    return "Success!"; //or Fail! if something went wrong
}
</script>
</body>
</html>
0 голосов
/ 11 марта 2019

Пример кода ниже с использованием setTimeout, для образца учитывается только до 100.

Может потребоваться проверить Разница между setTimeout с и без кавычек и скобок

А также есть: 'setInterval' против 'setTimeout' 

var delayId = null, frameTime = 25, countTo = 100, el, nn = 0;
function increment(e) {
  if (delayId) {
    window.clearTimeout(delayId);
  }
  el.textContent = nn++;
  if (nn <= countTo) {
    delayId = window.setTimeout(increment,frameTime);
  }
}
window.onload = function() {
    el = document.getElementById('herethenumbers');
    var b = document.getElementById('start');
    b.addEventListener("click",increment,false);
}
<button type="button" id="start">Show the numbers one at a time!</button>
<p id="herethenumbers">00</p>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...