主页 / 问题 / 1051122
Accepted
Владлен Вожжаев
Asked:2020-11-27 06:56:05 +0000 UTC2020-11-27 06:56:05 +0000 UTC

js异步（脚本挂起）

  • 772

请告诉我如何防止脚本在循环运行时暂时冻结。据我所知，不可能与 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>

javascript

1 个回答

  1. Best Answer

    您可以使用计时器而不是循环并重复调用该函数。并且一次绘制一定数量的方块，然后就可以解除冻结，例如：

    function go(){
  containerHTML = document.querySelector(".container").style.display = "none";
  let i = 0;
  let goTimer = setInterval(()=>{timevis.innerText = i; i++; if(i>100)clearTimeout(goTimer);},20)
  let canvas = document.getElementById("mainCanvas");
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  build();
}
function build(count = 1000, i = 0, j = 0, pix = +pixel.value, canvas = document.getElementById("mainCanvas").getContext('2d')){ //count - здесь типо количество отрисовываемых блоков за раз
  for (let k=0; k<count; k++){
    canvas.fillStyle = `rgb(${Math.random()*256},${Math.random()*256},${Math.random()*256})`;
    canvas.fillRect(i, j, pix, pix);
    if (j<window.innerHeight) j+=pix; else {j=0; i+=pix;}
    if (i<window.innerWidth) ; else return;
  }
  setTimeout(build, 2, count, i, j, pix, canvas); //запускаем еще раз
}
    <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>

    • 1

相关问题