Javascript setTimeout在eventlistener中不起作用

我一直在做一个简单的程序，模拟有人扔东西。一切似乎都正常，但。。。我想每100ms执行一个循环

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)
  }
})

按钮。addEventListener（“单击”，函数（）{
for（设i=bob_x；i<1504；i++）{
setTimeout（函数（）{
pos_x=i；
//控制台日志（“vx:+vx”）；
//控制台日志（“vy:+vy”）；
//控制台日志（“i:+i”）；
//控制台日志（“G:+G”）；
位置y=vy/vx*i-G*i*i/2/vx/vx；
对象样式集合属性（“左”，位置x）；
obj.style.setProperty（“top”，parseInt（pos_y，10））；
}, 100)
}
})

它不会等待，并在大约一刻钟内执行所有操作。我不知道为什么

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

它不会等待，并在大约一刻钟内执行所有操作

十分之一，实际上（100毫秒）

主要问题是，您正在安排一组计时器，这些计时器将在100毫秒后全部关闭。如果希望它们以100ms的间隔出现，则需要延长后续计时器的100ms超时时间，例如将

100

乘以

i-bob_x+1

：

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

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

按钮。addEventListener（“单击”，函数（）{
for（设i=bob_x；i<1504；i++）{
setTimeout（函数（）{
// ...
}，100*（i-bob_x+1））//
它不会等待，并在大约一刻钟内执行所有操作

十分之一，实际上（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)) // <============
  }
})

按钮。addEventListener（“单击”，函数（）{
for（设i=bob_x；i<1504；i++）{
setTimeout（函数（）{
// ...
}，100*（i-bob_x+1））//您的
for
循环正在同步运行，设置了一系列超时，每个超时都将在
for
循环结束后100毫秒发生。如果您想等待每个函数完成，然后再进行下一次迭代，您将需要不同的策略，可能是在每次迭代中使用
等待
延迟
：

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
button.addEventListener("click", async function(){

  for(let i = bob_x; i < 1504; i++){
    await delay(100);
    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));
  }
})

const delay=ms=>新承诺（resolve=>setTimeout（resolve，ms））；
addEventListener（“单击”，异步函数（）{
for（设i=bob_x；i<1504；i++）{
等待延迟（100）；
pos_x=i；
//控制台日志（“vx:+vx”）；
//控制台日志（“vy:+vy”）；
//控制台日志（“i:+i”）；
//控制台日志（“G:+G”）；
位置y=vy/vx*i-G*i*i/2/vx/vx；
对象样式集合属性（“左”，位置x）；
obj.style.setProperty（“top”，parseInt（pos_y，10））；
}
})
您的
for
循环正在同步运行，设置了一系列超时，每个超时都将在
for
循环结束后100毫秒发生。如果您想等待每个函数完成，然后再进行下一次迭代，您将需要不同的策略，可能是在每次迭代中使用
等待
延迟

:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
button.addEventListener("click", async function(){

  for(let i = bob_x; i < 1504; i++){
    await delay(100);
    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));
  }
})

const delay=ms=>新承诺（resolve=>setTimeout（resolve，ms））；
addEventListener（“单击”，异步函数（）{
for（设i=bob_x；i<1504；i++）{
等待延迟（100）；
pos_x=i；
//控制台日志（“vx:+vx”）；
//控制台日志（“vy:+vy”）；
//控制台日志（“i:+i”）；
//控制台日志（“G:+G”）；
位置y=vy/vx*i-G*i*i/2/vx/vx；
对象样式集合属性（“左”，位置x）；
obj.style.setProperty（“top”，parseInt（pos_y，10））；
}
})

你应该深入研究。你应该深入研究。我想说的是，它不是将每次迭代延迟十分之一秒，而是将整个代码执行大约四分之一。我想说的是，它不是将每次迭代延迟十分之一秒，而是将整个代码执行大约四分之一。实际上，你的

延迟

显然从不拒绝，因此，这个

async

函数和它们现有的处理程序（也不处理错误）之间没有太大区别。我总是对将承诺返回给不期望的事物持谨慎态度，但事件系统完全忽略了由

addEventListener

添加的处理程序的返回值，因此…实际上，您的

延迟

显然从不拒绝，因此此

异步

函数与其现有的handl之间没有太大区别呃（它也不处理错误）。我总是对将承诺返回给不期望它们的东西持谨慎态度，但事件系统完全忽略了由

addEventListener

添加的处理程序的返回值，因此。。。