Question

我写了以下内容：

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

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

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

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

Answer 1

粗略地说，在您的情况下，您不希望拥有一个全局适用的功能。您希望在显示的每个对话框上排队关闭。从版本1.4开始，jQuery已经实现了delay函数来实现这一目标。它为动画队列添加了一个null动作，以便后续的链式动画函数在队列中的延迟之后出现。

它将按如下方式实施：

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 2

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

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

因此，如果有人手动关闭对话框，那么请暂停超时，然后继续。

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

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

Answer 3

另一种扭曲，忙碌所以只在FireFox中试过，但它有效......

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

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

3 个答案: