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

Question

我有这个showMessage函数:

function showMessage(message) {
    $('#my_message').show();
    $('#my_message').html(message);
    setTimeout(function(){$('#my_message').fadeOut();},
        2000);
}

但是如果在setTimeout()和/或fadeOut()完成之前再次调用它,则它无法正常工作.即.它没有重新开始并等待2秒 - 它可以想象得有点结果.如何清除setTimeout和fadeOut以使其按预期工作？

编辑:

有人建议使用jQuery delay()而不是setTimeout().但我不认为delay()会正常工作(在jQuery delay()doc页面上,它表示delay()无法取消).这是我更新的代码:

$(document).ready(function() {
    $('#my_form').submit(function() {
        $('#my_message').stop();
        $('#my_message').hide();

        $.get('/my_url',
            $('#my_form').serialize(),
            function(data) {
                showMessage(data);
            });

        return false;
    });
});

function showMessage(message) {
    $('#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/