JQuery弹出消息

Question

我正在尝试制作一个自定义的弹出消息，该消息会出现并在用户面前显示5秒钟，然后淡出。这个功能很好，但是如果用户多次触发事件并且超时已经运行，则消息会快速消失。

到目前为止，我的函数如下：

function showMessage(message) {
    $(".messageText").text(message);

    $(".message").fadeIn("slow");    

    closeBox = function(){
        $(".message").fadeOut("slow");    
    }

    clearInterval(closeBox);
    setInterval(closeBox, 5000);
}

非常感谢

- Shaun Hogg

---

你能包含调用 showMessage 函数的代码吗？ - Gaz Winter

你可以添加一个变量来保存消息框的状态。如果消息框正在显示，则不执行该函数。 - Raptor

你觉得在淡出函数本身指定超时时间怎么样？这样行吗？ - Harry Joy

Answer 1

试试这个：

var interval;

function showMessage(message) {
    $(".messageText").text(message);

    $(".message").fadeIn("slow");
    if(interval){ // If a interval is set.
        clearInterval(interval);
    }
    interval = setInterval(closeBox, 5000);
}

function closeBox(){
    $(".message").fadeOut("slow");    
}

您需要将setInterval的返回值赋值给一个变量。这个句柄可以用来使用clearinterval结束间隔。(您无法通过函数清除间隔，只能通过间隔句柄)

此外，我将closeBox函数从showMessage函数中移出，每次调用showMessage都不需要声明它。

- Cerbrus

---

间隔应该是interval。 - bipen

jQuery的delay()旨在应用于像这种情况。 - semir.babajic

@semir.babajic：也许是这样，但与其告诉用户偷懒，我更喜欢告诉他如何修复他的本机JS。程序员不应总是懒惰，时不时地重新发明轮子会让你学到更多东西。（特别是在像这样的小事情上） - Cerbrus

@Cerbrus：同意。但我已经毕业了，现在我更专注于节省时间，因为我是一名完全以商业为导向的开发人员。节省开发时间和了解底层工作原理有时会产生冲突。时间和知识都很宝贵，但时间更为珍贵。 - semir.babajic

@semir.babajic：你不是提问的人。 - Cerbrus

哈哈，你让我看了好几分钟的代码，因为我没注意到 interval 被打成了 inverval http://jsfiddle.net/cauFU/ ，后来看到了 @bipen 的评论...无论如何还是点个赞吧，因为你没有偷懒 :) - Alex

Answer 2

使用jQuery delay怎么样？

示例：

$("#container").fadeIn().delay(amoutOfTimeInMiliseconds).fadeOut();

您的函数：

function showMessage(message) {
    $(".messageText").text(message);

    $(".message").fadeIn("slow").delay(5000).fadeOut("slow");    
}

应该可以工作...祝好。

- semir.babajic