javascript 如何在完成之前清除 setTimeout() 和 jQuery fakeOut() ？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12666002/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to clear setTimeout() and jQuery fadeOut() before either are done?
提问by Ryan
I have this showMessage function:
我有这个 showMessage 功能：
function showMessage(message) {
$('#my_message').show();
$('#my_message').html(message);
setTimeout(function(){$('#my_message').fadeOut();},
2000);
}
But it doesn't work correctly if it's called again before the setTimeout() and/or the fadeOut() have completed. ie. it doesn't start over again and wait 2 seconds - it stutters a bit as you can imagine. How can I clear the setTimeout and the fadeOut so it works as expected?
但是如果在 setTimeout() 和/或fadeOut() 完成之前再次调用它，它就不能正常工作。IE。它不会重新开始并等待 2 秒钟 - 正如您可以想象的那样，它有点口吃。如何清除 setTimeout 和fadeOut 使其按预期工作？
edit:
编辑：
It was suggested to use jQuery delay() instead of setTimeout(). But I don't think delay() will work properly(on jQuery delay() doc page it says delay() can't be cancelled). Here's my updated code:
建议使用 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(),
function(data) {
showMessage(data);
});
return false;
});
});
function showMessage(message) {
$('#my_message').html(message);
$('#my_message').show();
$('#my_message').delay(5000).fadeOut();
}
So the message will show for 5 seconds and then fade. The problem is that the delay is never cancelled. For example if I submit the form once and get the message to show, and then wait 4 seconds and submit again, then the first delay will still be alive and thus the second delay looks like 1 second. So how can I make the delay always 5 seconds even if a delay is interrupted. I tried using stop(true)and stop('fx', true)but neither seemed to have any effect.
因此该消息将显示 5 秒钟，然后消失。问题是延迟永远不会被取消。例如，如果我提交一次表单并显示消息，然后等待 4 秒并再次提交，那么第一个延迟仍然存在，因此第二个延迟看起来像 1 秒。那么，即使延迟被中断，我怎样才能使延迟始终为 5 秒。我尝试使用stop(true)，stop('fx', true)但似乎都没有任何效果。
回答by James Montagne
Don't use setTimeoutat all. Change it to delay.
根本不要用setTimeout。将其更改为delay.
$('#form_message').delay(2000).fadeOut();
This will then allow you to use jquery's stop.
这将允许您使用 jquery 的stop.
$('#form_message').stop();
stopalso takes optional parameters which let you decide if you want to complete the animation or simply stop where it is.
stop还采用可选参数，让您决定是要完成动画还是简单地停止动画。
回答by Bart
To answer your original question:
要回答您的原始问题：
var messageTimeout;
function showMessage(message) {
clearInterval(messageTimeout);
$('#my_message').stop().html(message).fadeTo(100, 1);
messageTimeout = setTimeout(function(){$('#my_message').fadeOut();}, 2000);
}
