如何在完成之前清除 setTimeout() 和 jQuery fadeOut()？

Question

我有这个 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() 不能被取消）。这是我更新的代码：

$(document).ready(function() {
    $('#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)，但似乎都没有任何效果。

Answer 1

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

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

这将允许您使用 jquery 的stop。

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

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

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

Answer 2

回答你原来的问题：

var messageTimeout;
function showMessage(message) {
    clearInterval(messageTimeout);
    $('#my_message').stop().html(message).fadeTo(100, 1);
    messageTimeout = setTimeout(function(){$('#my_message').fadeOut();}, 2000);
}