javascript - setTimeout 在事件监听器中不起作用

Question

我一直在做一个简单的程序，模拟某人 throw 物体。一切似乎都正常，但是......我想每 ~100 毫秒执行一个循环。

button.addEventListener("click", function(){

  for(let i = bob_x; i < 1504; i++){
    setTimeout(function(){
      pos_x = i;
      //console.log("vx: " + vx);
      //console.log("vy: " + vy);
      //console.log("i: " + i);
      //console.log("G: " + G);
      pos_y = vy/vx*i - G*i*i/2/vx/vx;

      obj.style.setProperty("left", pos_x);
      obj.style.setProperty("top", parseInt(pos_y, 10));
    }, 100)
  }
})

它不会等待并在大约四分之一秒内执行所有操作。我不知道为什么。

这里的 vx 和 vy 是向量的坐标，通过从事件“mousedown”的坐标中减去事件监听器“mouseup”的坐标而得到。 Bob_x 是代表一个人的 block 的 x 坐标。

Answer 1

It doesnt wait and executes everything in about quarter a second.

十分之一，实际上(100 毫秒)。

主要问题是您要安排一堆计时器，这些计时器将全部在 100 毫秒后关闭。如果您希望它们以 100 毫秒为间隔，则需要为后续计时器延长 100 毫秒的超时时间，例如将 100 乘以 i - bob_x + 1:

button.addEventListener("click", function(){

  for(let i = bob_x; i < 1504; i++){
    setTimeout(function(){
      // ...
    }, 100 * (i - bob_x + 1)) // <============
  }
})

另外，pos_x 和 pos_y 没有在处理程序中声明似乎很奇怪。

如果这是出于动画目的，您可能需要使用 requestAnimationFrame为了这。 Here's an article by Paul Irish这可能会有用。