0

我有这个功能来移动一个物体，我想在我的周期中设置 500 mil secs 的间隔。没有 jQuery，只有 javascript。我试过 setInterval('',500)

function shot() {
    document.getElementById('power').play();
    for (var i=140; i<400; i++)
    {  
        document.getElementById('shot').style.visibility='visible';
        imgShot.style.left = parseInt(imgObj.style.left) - 130 + 'px';  
        imgShot.style.top = parseInt(imgObj.style.top) - i + 'px';
        setInterval('',500);
    }           
}
4

2 回答 2

1

在 JavaScript 中阻止顺序执行的唯一方法是创建一个繁忙的循环（或使用类似的阻塞函数alert）：但您不希望这样做，因为它会冻结用户界面- 包括更新元素移动的 UI 显示！

相反，构建代码使其使用异步回调- 此模型允许浏览器事件循环不间断地继续，以便它可以对用户输入做出反应并根据 DOM 更改更新显示。

document.getElementById('power').play();
document.getElementById('shot').style.visibility='visible';

var i = 140;
function moveIt() {
    imgShot.style.left = parseInt(imgObj.style.left) - 130 + 'px';  
    imgShot.style.top = parseInt(imgObj.style.top) - i + 'px';
    i++;
    if (i < 400) {
      // If have more, schedule again in .5s
      // Remember that setTimeout *returns immediately* because it
      // is an asynchronous operation.
      setTimeout(moveIt, 500);
    } else {
      // This will be executed when animation finishes.
    }
}

moveIt();
// This will be executed after first movement which is well before
// the animation finishes. We could also use setTimeout(moveIt, ..) here,
// depending on what is desired.

或者，更好的是，使用类似的东西jQuery.animate来处理大部分重复的东西。（您可能必须为这种情况编写自定义缓动，因为运动是从沿 y 轴的非 0 初始值线性加速的。）

setInterval也可以使用（完成后取消它，而不是开始新的超时），但我发现这种setTimeout方法在概念上更容易展示。不同之处在于，setInterval它将尝试始终在 time=iteration*timeout 时运行，这可以 - 在退化的情况下 - 比多个 setTimeout 调用更加一致，或者正如 Alnitak 所指出的，它可以有害地堆叠/级联。

于 2013-09-05T21:20:00.257 回答
0

如果您想每 500 毫秒运行一次“拍摄”功能，

function shot() {
    document.getElementById('power').play();
    for (var i=140; i<400; i++)
    {  
        document.getElementById('shot').style.visibility='visible';
        imgShot.style.left = parseInt(imgObj.style.left) - 130 + 'px';  
        imgShot.style.top = parseInt(imgObj.style.top) - i + 'px';
    }
}

setInterval(shot,500);

否则，如果您想延迟 for 循环的每次迭代，请查看这个几乎重复的问题：How to pause a FOR loop in Javascript in a function？

于 2013-09-05T21:16:23.637 回答