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时都声明它。