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

我有一个MVC应用程序，它使用DevXPress gridview显示数据。我之所以提到这一点，是因为在更新记录后，我试图显示一个包含消息的

，并在3秒钟后将其关闭（隐藏），或者在用户单击该记录或单击页面上的任何其他内容时将其关闭。我已经读了很多关于如何使用jQuery或Javascript关闭和打开元素的文章，但是我在这方面遇到了困难

这是我的，它让我大约有3/4的方式到达那里…当点击按钮时，div打开（模拟DevExpress网格的“更新”部分），如果你点击消息，它将关闭。我搞不懂的是如何让它在3秒钟后自动关闭。我确实尝试过使用

.delay（）

，比如

$（'#msg'）.delay（3000）.toggle（500）

但似乎

.delay（）

实际上会停止所有其他UI事件，直到持续时间结束。这样做的副作用是，如果用户单击文档的任何其他部分，它在延迟持续时间结束之前不会响应……因此延迟持续时间会关闭div，但文档的“单击”事件会触发并显示div（希望有意义）

简言之，我尝试在回发（单击按钮）上自动显示一个div，然后在3秒钟后自动关闭它，或者在用户单击它或文档中的任何其他元素时关闭它

---

感谢您的任何建议/指导

使用带有setTimeout（）的计时器

演示：

更新：如果在显示消息时单击页面中的任何位置，它将不会隐藏，因此请尝试

$(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);
    });
});

---

演示：

使用带有setTimeout（）的计时器

演示：

更新：如果在显示消息时单击页面中的任何位置，它将不会隐藏，因此请尝试

$(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);
    });
});

演示：

可以这样吗

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

会是这样吗

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

---

这工作得很好…我需要对它进行一点修改b/c DevExpress控件使用回调函数，这使原始代码有点混乱，但是你让我走上了正确的轨道，我能够让它工作。再次感谢！这工作得很好…我需要对它进行一点修改b/c DevExpress控件使用回调函数，这使原始代码有点混乱，但是你让我走上了正确的轨道，我能够让它工作。再次感谢！