У меня есть javascript, который создает довольно занятые страницы. Создание страниц занимает секунду или две. Затем браузеру требуется несколько секунд, чтобы отобразить страницы. Я не хочу, чтобы люди нажимали кнопки, пока страницы не будут заполнены и отображены.
Кто-нибудь знает элегантный способ определения, когда рендеринг завершен? Приведенный ниже код демонстрирует мою текущую стратегию (тайм-аут не срабатывает до завершения рендеринга) - но наверняка должен быть лучший способ?
На моем P C генерация тестов занимает около 2 секунд, но для появления нового контента требуется еще 8 секунд.
<!doctype html>
<head>
<script>
var busy = false;
function enable(button, t)
{
button.disabled = false;
busy = false;
console.log("button reeneable.", "" + (Date.now() - t) + " microseconds.");
}
function generate()
{
if (busy) return;
busy = true;
let div = document.getElementById("div");
let button = document.getElementById("button");
let table = document.createElement("table");
let t = Date.now();
console.log("Start generation");
button.disabled = true;
for (let i = 0; i < 3000; i ++)
{
let row = table.insertRow(-1);
for (let j = 0; j < 50; j ++)
{
let cell = row.insertCell(-1);
cell.innerHTML = Math.round(Math.random() * 1000000);
}
}
console.log("Generation done.", "" + (Date.now() - t) + " microseconds.");
div.innerHTML = "";
console.log("Div cleared.", "" + (Date.now() - t) + " microseconds.");
div.appendChild(table);
console.log("table.appendChild called and has returned.", "" + (Date.now() - t) + " microseconds.");
setTimeout(enable, 100, button, t);
}
</script>
</head>
<body>
<button id = "button" onclick="generate();">Generate Table</button>
<div id="div"></div>
</body>
</html>