javascript - JQuery 弹出消息

Question

我正在尝试制作一条自定义弹出消息，该消息向用户显示 5 秒钟，然后淡出。这可以正常工作，但如果使用多次触发事件并且超时已经在运行，则消息很快就会消失。

到目前为止我的功能...

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

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

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

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

非常感谢

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调用都声明。

Answer 2

使用 jQuery 延迟怎么样？

样本：

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

你的功能：

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

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

它应该工作......问候。