请告诉我如何防止脚本在循环运行时暂时冻结。据我所知,不可能与 DOM 并行工作,那么问题就来了,但是怎么做呢?当函数build(full)
忙于自己的事务时,我想做一些其他有用的事情。
function go(){
containerHTML = document.querySelector(".container").style.display = "none";
t0 = performance.now();
for (let i=0; i<1000; i++){}
t1 = performance.now();
let i = 0;
let goTimer;
goTimer = setInterval(()=>{timevis.innerText = i; i++; if(i>100)clearTimeout(goTimer);},(t1-t0)*1500)
build();
}
async function build(){
pixel = +pixel.value;
canvas = document.getElementById("mainCanvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas = canvas.getContext('2d');
for(let i=0;i<window.innerWidth;i+=pixel)
for(let j=0;j<window.innerHeight;j+=pixel){
canvas.fillStyle = `rgb(${Math.random()*256},${Math.random()*256},${Math.random()*256})`;
canvas.fillRect(i, j, pixel, pixel);
}
}
<canvas id="mainCanvas"></canvas>
<div class="container">
<h4>Введите сторону квадратов</h4>
<input type="number" id="pixel" min="1" value="1"><b>px</b><br>
<button onclick="go()">Отрисовать все сразу</button>
</div>
<h1 id="timevis"></h1>
您可以使用计时器而不是循环并重复调用该函数。并且一次绘制一定数量的方块,然后就可以解除冻结,例如: