5

我正在尝试制作一个模态对象库，它将创建和打开一个 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;
}
4

2 回答 2

2

您不能让代码等待（例如暂停当前执行线程的执行），直到某个未来事件发生。Javascript 根本不支持该功能或以这种方式工作。除了几个模态函数（如alert().

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

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

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

于 2013-02-08T01:21:14.667 回答
2 
var animationDuration = 1000;
setTimeout(function(){
    // Animation done!
}, animationDuration);
于 2013-02-08T01:46:59.563 回答