Question

我有一个Javascript函数（不是jQuery），可以打开或关闭一个框。问题是我关闭了该框，运行了一些改变内容的代码，然后重新打开它。

现在问题＆＃34;是因为代码的其余部分太快了，因此它甚至无法关闭，更不用说重新打开了。我可以让动画不允许在内部再次运行，除非最后一个完成，但是这会限制它，如果我说，想要在两个不同的对象上运行两次。

那么防止这种情况的最佳方法是什么？我的想法可能是暂停，说要在运行动画之前等待，但这看起来很糟糕，我不确定是否有更好的解决方案？

感谢。

function animate(boxID, step, limit, speed){
    // Add timeout property to animate function/object if it doesn't exist already
    if(animate.timeout == undefined) animate.timeout = 0;

    // Clear the current timeout
    clearTimeout(animate.timeout);

    // Initialize box and current box height
    var box = document.getElementById(boxID);
    var h   = box.clientHeight;

    // Check if we want the step needs to be changed to pos/neg based on which direction is wanted to be going
    if(h < limit && step < 0 || // Positive
       h > limit && step > 0){  // Negative
        step *= -1;
    }


    // If the step is positive, then we need to be below the limit, or if negative, then greater than the limit
    if((step > 0 && h <= limit - step) || (step < 0 && h >= limit - step)){
        // Set new height
        box.style.height = h + step + "px";

        // Start new timeout
        animate.timeout = setTimeout(function(){ animate(boxID, step, limit, speed, 1); }, speed);
    }
    else{
        box.style.height = limit + "px"; // Set to the exact height
    }
}

Answer 1

你可以通过回调实现这一目标。您的animate函数会获得一个加号参数，一个在动画准备就绪时调用的函数：

function animate(boxID, step, limit, speed, onReady){

动画完成后，您可以调用它：

else{
    box.style.height = limit + "px"; // Set to the exact height
    if (onReady) { onReady(); }
}

您还希望将回调转发到超时调用：

setTimeout(function(){ animate(boxID, step, limit, speed, 1, onReady); }, speed);

所以，你可以像这样调用多个框的函数：

animate(box1_id, close_step, close_limit, close_speed, function () {
    // now box1 is closed, put something in. then:
    animate(box1_id, open_step, open_limit, open_speed, null);
});
// then the same for box2, etc…

这样box1和box2会同时关闭，只有在把东西放进去后才会重新打开。

此外，您无法将定时器存储在该功能上，因为它现在在多个盒子上运行。所以你可以把它存放在盒子上，或者放在一个单独的地方。例如，在函数外部创建一个对象，并将所有框的计时器放在：

中

var timeouts = {};
timeouts[box1_id] = setTimeout(…);

Javascript等待一个动画在下一个动画开始之前完成

1 个答案: