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

Question

我有一个 MVC 应用程序，它使用 DevExpress 网格视图来显示数据。我提到这一点的原因是因为在更新记录后，我试图显示一个带有消息的<div>，并在 3 秒后关闭（隐藏）它，或者在用户单击它或单击时关闭它在页面上的任何其他内容上。我已经阅读了大量关于如何使用 jQuery 或 Javascript 关闭和打开元素的 SO 文章，但我遇到了困难。

这是我的fiddle，它让我走了大约 3/4 的路……单击按钮时会打开 div（模拟 DevExpress 网格的“更新”部分），如果您单击消息，它关闭。我不知道如何让它在 3 秒后自动关闭。我确实尝试使用.delay()，就像$('#msg').delay(3000).toggle(500); 一样，但似乎.delay() 实际上会停止所有其他UI 事件，直到持续时间结束。这样做的副作用是，如果用户单击文档的任何其他部分，它不会响应，直到延迟持续时间结束......所以延迟持续时间会关闭 div，但随后会发生 'click' 事件文档触发并显示 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

Answer 2

可以这样吗？

        $("button").click(function(e){
          $('#msg').toggle(500);
            setTimeout(function(e){
                $("#msg").fadeOut();
            }, 2000);
        });