javascript - n 秒后或单击按钮时自动关闭 div

Question

我有一个 MVC 应用程序，它使用 DevExpress gridview 来显示数据。我提到这个的原因是因为更新记录后，我试图显示 <div>在其中包含一条消息并让它在 3 秒后关闭(隐藏)，或者在用户单击它或单击页面上的任何其他内容时关闭。我已经阅读了大量关于如何使用 jQuery 或 Javascript 关闭和打开元素的文章，但我很难理解。

这是我的 fiddle ，这使我到达那里的方式大约为 3/4……单击按钮时，div 打开(模拟 DevExpress 网格的“更新”部分)，如果您单击该消息，它将关闭。我想不通的是如何让它在 3 秒后自动关闭。我确实尝试使用 .delay() ，像这样$('#msg').delay(3000).toggle(500);但似乎 .delay()实际上停止所有其他 UI 事件，直到持续时间结束。这样做的副作用是，如果用户单击文档的任何其他部分，它不会响应，直到延迟持续时间结束....因此延迟持续时间关闭 div，然后关闭 div 的“点击”事件文档触发并显示 div(希望有意义)。

简而言之，我正在尝试在回发(单击按钮)时自动显示一个 div，然后在 3 秒后自动关闭它，或者在用户单击它时关闭它，或者在文档。

感谢任何建议/指导!

Answer 1

使用带有 setTimeout() 的定时器

$(document).ready(function ($) {
    $(".messageInTab").click(function () {
        $(this).hide(500);
        clearTimeout(timer)
    });

    var timer;
    $("button").click(function (e) {
        $('#msg').show(500);
        timer = setTimeout(function () {
            $('#msg').hide(500);
        }, 3000);
    });
});

演示:Fiddle

更新:显示消息时点击页面任意位置不会隐藏，试试

$(document).ready(function ($) {
    var $msg = $('#msg');
    $(document).click(function () {
        if ($msg.is(':visible')) {
            $msg.hide(500);
            clearTimeout(timer);
        }
    });

    var timer;
    $("button").click(function (e) {
        e.stopPropagation();
        if ($msg.is(':hidden')) {
            timer = setTimeout(function () {
                $('#msg').hide(500);
            }, 3000);
        }
        $msg.toggle(500);
    });
});

演示:Fiddle