延迟JavaScript函数直到CSS动画完成

Question

我正在尝试创建一个模态框对象库，该库将创建并打开div、iframe、img等元素，类似于colorbox。我正在使用纯JavaScript实现，因此请不要推荐jQuery。

问题是，当用户使用`var myModal = new modal(options, width, height)`创建新的模态框时，我希望它能检查是否已经存在模态框，关闭它，等待关闭动画完成，然后继续创建新的模态框。我已经可以做到所有这些，但是我遇到了一个问题，即在旧模态框关闭之前，如何等待创建新模态框。我知道`webkitTransisionEnd`和触发自定义事件，但那不是问题所在。我需要实际的代码在旧模态框完成关闭之前等待，然后继续完成函数剩余部分，并且仍然向用户返回正确的对象。以下是我尝试过的一些方法：

- 创建一个`transisionEnd`监听器，等待动画结束，然后创建新模态框。(这有效，但考虑到它会变成一个嵌套函数，很难返回正确的对象)。 - 使用`try`，`catch`块。(这对我的目的没有用) - 使用无数种相同的变体，其中使用递归函数。

如果有人有想法，请随时发布。我尝试了很多东西，但显然还没有我需要的。谢谢。

编辑：

我已经找到了答案。我只需要将`transitionEnd`监听器附加到已经打开的模态框上，然后在类之外创建另一个函数，以相同的构造函数重新调用模态框。代码看起来有点像这样：

function create(options, width, height) {
    return new modal(options, width, height);
}

function modal(options, width, height) {
    if (modal != null) {
        modal.close();
        modal.addEventListener('webkitTransitionEnd', function() {
            create(options,width,height);
        });
    }
    return;
}

- Rook777

---

你是说当你调用 "new modal(...)" 时，你想销毁旧的模态框吗？还是，你希望新的模态框“变成”旧的模态框？你想从 "new modal(...)" 返回哪个模态框实例给用户？ - joeltine

@joeltine 我想要销毁旧的并创建新的。我希望能够返回新的模态实例。 - Rook777

Answer 1

var animationDuration = 1000;
setTimeout(function(){
    // Animation done!
}, animationDuration);

- yckart

---

最好扩展一下，解释一下代码的作用，以防原帖作者（或通过搜索找到它的人）不熟悉setTimeout()。 - pjmorse

问题在于，当超时等待时，函数的其余部分仍然继续执行。而 @pjmorse，我非常熟悉超时。 - Rook777

Answer 2

你不能让代码等待（例如暂停当前线程的执行）直到某个未来事件发生。JavaScript根本不支持这种方式。它没有一种阻塞当前线程执行的方法，除了一些模态函数（例如alert()）。你可以使用回调函数来通知某些调用代码即将发生的事件。但是，调用代码将注册其回调函数并立即返回并继续执行，因此调用代码必须编写以处理回调实现。

如果您试图在库中完成所有工作，则应该不难。当调用者创建新的模态对话框时，您只需检查是否存在预先存在的模态对话框。如果没有，请按常规流程进行。如果有一个正在运行，则向之前的一个注册回调通知、存储构造函数的内容，但不要实际创建新的模态对话框。然后，当回调被调用以指示先前的模态对话框已完成时，您完成放置新模态对话框的工作。

如果这些模态对话框都是您自己创建的，则需要为它们实现完成通知，以便在关闭它们时可以通知任何侦听器它们现在已完成。如果它们使用动画关闭并且您希望等待关闭通知直到动画完成，则您也可以实现它。如果您正在使用CSS3动画，则如您似乎已经知道的那样，可以使用transtionEnd事件来了解动画何时完成，或者如果您知道动画的时间并且不需要非常精确，您也可以只是使用setTimeout()来知道动画大约何时完成。

- jfriend00

---

这帮助我找对了方向。答案其实相当简单（当然）。 - Rook777