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/

Answer 2

回答你原来的问题：

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

如何在完成之前清除setTimeout（）和jQuery fadeOut（）？

2 个答案: