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

Answer 1

在某些未来事件发生之前，您不能使代码等待（例如，暂停执行当前执行的线程）。 Javascript根本不支持或以这种方式工作。除了alert()之类的几个模态函数之外，它没有办法阻止当前执行的线程。

您可以使用回调来通知某些未来事件的调用代码。但是，调用代码将注册其回调并立即返回并继续执行，因此必须编写调用代码来处理回调实现。

如果您正在尝试在图书馆内完成所有工作，那么它应该不那么艰难。当调用者创建新模态时，您只需检查预先存在的模态对话框。如果一个人没有起来，你就照常进行。如果有一个，那么你用前一个注册回调通知，存储构造函数的内容，但实际上不创建新的模式对话框。然后，当你的回调被调用以指示先前的模态对话框已经完成时，你就完成了新的模态。

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

Answer 2

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

延迟javascript函数直到css动画完成

2 个答案: