jQuery - UI 对话框 - 寻找定时关闭的智能解决方案答案

【问题标题】：jQuery - UI Dialog - looking for a smart solution for a timed closejQuery - UI 对话框 - 寻找定时关闭的智能解决方案
【发布时间】：2011-01-15 19:39:11
【问题描述】：

我写了以下内容：

// Called with setTimeout(magicDialogDelayedClose, 2500);
function magicDialogDelayedClose() {
    $(".ui-dialog").fadeOut(function() {
        dialog_general.dialog('close');
    }); 
}

当我显示一个我想在 2.5 秒内自动关闭的通知对话框时，使用 setTimeout 调用上述内容。

我注意到的问题是，如果使用手动关闭对话框，此计时器仍在运行。如果用户随后打开一个新对话框（这很有可能），则计时器可以关闭该新对话框。

什么是处理这个问题的聪明方法？j

【问题讨论】：

你能告诉我们你的通知对话框代码吗？调用和上面的代码驻留在哪里？

标签： jquery jquery-ui dialog

【解决方案1】：

粗略地说，在您的情况下，您不希望有一个全局适用的功能。您希望在每个对话框出现时排队关闭。从 1.4 版开始，jQuery 已经实现了 delay 函数来完成这个任务。它将一个空动作添加到动画队列中，以便后续链接的动画函数在队列中的延迟之后出现。

实现如下：

function insertDialog() {
  // substitute your insertion code here
  var d = $('<div class="ui-dialog"></div>').appendTo($('#dialog_area'));

  // add a 2.5s delay into the animation queue, then add
  // a fadeOut with $(this).close() as a callback
  d.delay(2500).fadeOut(function(){ $(this).close() });
}

【讨论】：

+1。优雅的解决方案。很好。我认为对话框的 jQuery UI 事件选项自发布以来已更改。现在你想打电话：d.delay(2500).fadeOut(function() { $(this).dialog('close') });

【解决方案2】：

您可以通过将超时存储在变量中然后使用clearTimeout() 方法来清除超时（停止触发）：

var timeout = setTimeout(magicDialogDelayedClose, 200);
clearTimeout(timeout);

因此，如果有人手动关闭您的对话框，然后停止超时继续进行。

清除超时的安全方法是在这样做之前确定 timeout 是否不为空：

function safeClearTimeout(timeout) {
    if (timeout != null)
        clearTimeout(timeout);
}

【讨论】：

我非常喜欢这个主意。问题是如果没有设置超时，你会得到一个 Uncaught ReferenceError: dialog_timeout is not defined
@AnApprentice 那么清空前先检查一下是否为空？
是的，我只是设置了一个全局变量超时。那成功了。所以一个很好的解决方案。谢谢！我不能再接受 7 分钟（我讨厌 stackoverflow。
@AnApprentice：为了将来参考，您可以通过在代码开头定义它或通过window.dialog_timeout 显式查看window 命名空间来避免未定义错误。然而，根据您的最终愿望，像这样的全局超时可能不是最佳选择。有关在插入函数中实现闭包的方法，请参阅我的解决方案。 Marcus 的解决方案虽然有效，但如果对话框 B 在 +1s 处插入，则在 +0s 处插入的对话框 A 直到 +3s 才会关闭，这可能是也可能不是你想要的。
@AnApprentice: @AnApprentice: magicDialogDelayedClose 在这个意义上作为“全局”函数是用词不当，但这意味着当且仅当调用 magic... 时，所有匹配其选择器的项目都会被关闭（由您的实施）。特定对话框不会独立于其他对话框关闭。如果您的延迟为 2 秒，并且它在比此更短的时间间隔内重置（例如，每 1.5 秒显示一个新对话框），那么越来越多的对话框将永远不会关闭。 Marcus 和我的解决方案都有时间和地点，但了解其中的区别会很有帮助。

【解决方案3】：

另一个转折，很忙，所以只在 FireFox 中尝试过，但它确实有效......

$('#dialogBox').html("Put some text message here.").dialog("open").delay(2500).fadeOut(function(){ $(this).dialog("close") });

【讨论】：