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");    
}

应该有用......问候。

JQuery弹出消息

2 个答案: