2

我有这个 showMessage 功能：

函数显示消息（消息）{
    $('#my_message').show();
    $('#my_message').html(message);
    setTimeout(function(){$('#my_message').fadeOut();},
        2000);
}

但是如果在 setTimeout() 和/或 fadeOut() 完成之前再次调用它，它就不能正常工作。IE。它不会重新开始并等待 2 秒 - 正如您可以想象的那样，它有点口吃。如何清除 setTimeout 和 fadeOut 使其按预期工作？

编辑：

建议使用 jQuery delay() 而不是 setTimeout()。但我认为 delay() 不能正常工作（在 jQuery delay() 文档页面上它说 delay() 不能被取消）。这是我更新的代码：

$(文档).ready(函数() {
    $('#my_form').submit(function() {
        $('#my_message').stop();
        $('#my_message').hide();

        $.get('/my_url',
            $('#my_form').serialize(),
            功能（数据）{
                显示消息（数据）；
            });

        返回假；
    });
});

函数显示消息（消息）{
    $('#my_message').html(message);
    $('#my_message').show();
    $('#my_message').delay(5000).fadeOut();
}

因此消息将显示 5 秒钟然后淡出。问题是延迟永远不会被取消。例如，如果我提交一次表单并让消息显示，然后等待 4 秒并再次提交，那么第一个延迟仍然存在，因此第二个延迟看起来像 1 秒。那么即使延迟中断，我怎样才能使延迟始终为 5 秒。我尝试使用stop(true)，stop('fx', true)但似乎都没有任何效果。

4

2 回答 2

14

根本不要使用setTimeout。将其更改为delay.

$('#form_message').delay(2000).fadeOut();

这将允许您使用 jquery 的stop.

$('#form_message').stop();

stop还接受可选参数，让您决定是要完成动画还是简单地停止动画。

http://api.jquery.com/stop/

于 2012-09-30T23:26:02.230 回答
1

要回答您的原始问题：

var messageTimeout;
function showMessage(message) {
    clearInterval(messageTimeout);
    $('#my_message').stop().html(message).fadeTo(100, 1);
    messageTimeout = setTimeout(function(){$('#my_message').fadeOut();}, 2000);
}
于 2012-10-01T00:49:21.470 回答