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

Question

我写了以下内容：

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

当我显示要在2.5秒内自动关闭的通知对话框时，会用setTimeout调用上面的代码。

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

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

Answer 1

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

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

因此，如果有人手动关闭了您的对话框，请立即停止超时。

清除超时的安全方法是在执行此操作之前确定timeout是否不为null：

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

Answer 2

粗略地说，在您的情况下，您不希望有一个全局适用的函数。您希望在每个对话框出现时对其关闭进行排队。从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() });
}

Answer 3

另一个转折，忙碌所以只在FireFox中尝试过，但它起作用了…

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