Question

我创建了一个矩形，我想给它一个随时间变化的速度（加速度）。

所以我在“while”循环中创建了一个“setTimeout”。

据说，“while”循环应该连续地将“setTimeout”（var = interval）的间隔改为-1，而是用1 !!替换它，这样就可以每1毫秒打印一次矩形。

我想知道为什么会这样。如果我使用“for”循环，会发生同样的事情。我不介意任何其他创造加速效果的替代方案。

谢谢

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")        

var posX=20;
var posY=20;

var interval = 500;    


function print () {
             
             //background
             
context.fillStyle="black";  
context.fillRect(0, 0, 500, 500);
             
            //object
            
context.fillStyle="#4286f4";         
context.fillRect(posX, posY, 50, 50);  
                
posX = posX + 1;
posY = posY + 1;
                
        }
            
   
while (interval > 300) {        
         
        interval-- ;
 
 setTimeout(print, interval);
    
    }

<!DOCTYPE html>
<html>
    <head>
        <title>Particles</title> 
        <meta charset="UTF-8"/>
    </head>
    
    <body>
        <canvas id="canvas" width="500" height="500"></canvas>
    
     
    </body>

</html>

Answer 1

“while”循环应该不断改变“setTimeout”的间隔

不，它会以新的间隔安排新计时器。前一个也一直在运行。你非常，非常，非常非常快地得到一个待定的一堆的计时器 - 然后它们会在下一个计时器到期之后到期。

启动计时器后，无法在启动计时器时进行更改。你可以取消它，但你不能在它发生时改变它。

setTimeout还会安排单个定时回调。如果您想要重复，请在运行时使用setInterval或从setTimeout回调计划新的回调。

我建议退一步，尝试计时器和间隔的基础知识，然后再进行复杂的动画制作。

另外：setTimeout和setInterval是动画的错误工具，至少是孤立的。相反，当您知道需要更新圈子时，请使用requestAnimationFrame让浏览器在呈现显示之前立即给您打电话（它会触发~60次/秒，因此只在您需要时请求它）。这有助于您协调浏览器的内部显示周期。

这些方面的东西：

scheduleNext();

function scheduleNext() {
  if (interval > 300) {
    setTimeout(function() {
      requestAnimationFrame(function() {
        print();
        scheduleNext();
      });
    }, interval);
  }
}

直播示例：

var canvas = document.getElementById("canvas")
var context = canvas.getContext("2d")

var posX = 20;
var posY = 20;

var interval = 500;


function print() {
  //background
  context.fillStyle = "black";
  context.fillRect(0, 0, 500, 500);

  //object
  context.fillStyle = "#4286f4";
  context.fillRect(posX, posY, 50, 50);

  posX = posX + 1;
  posY = posY + 1;
}

scheduleNext();

function scheduleNext() {
  if (interval > 300) {
    setTimeout(function() {
      requestAnimationFrame(function() {
        print();
        scheduleNext();
      });
    }, interval);
  }
}

<canvas id="canvas" width="500" height="500">

Answer 2

Module B不会暂停脚本，它会调度回调以在给定的毫秒内运行。这意味着您正在安排所有回调，并且它们之间只有1毫秒的差异，这不足以导致可观察到的差异。

Answer 3

更新：

ahaa，是的，可以用“setTimeout”创建动画循环，

function test () {
    
print ();     
interval = interval - 10;   
setTimeout(test, interval); 
    
}
    
 test ();

“while”循环改变“setTimeout”的间隔不工作

3 个答案: