Question

我有这个功能来移动一个物体，我想在我的周期上设置500毫秒的间隔。没有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);
    }           
}

Answer 1

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

相反，构造代码使得它使用异步回调 - 此模型允许浏览器事件循环不间断地继续，以便它可以响应用户输入并从DOM更改中更新显示。 / p>

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指出的那样，它可以有害地堆叠/级联。

Answer 2

如果你想每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?

我可以在javascript中暂停500mil周期吗？

2 个答案: