使用 setTimeout 延迟 jQuery 动作的计时
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16945789/
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
Using setTimeout to delay timing of jQuery actions
提问by cssyphus
I am attempting to delay the swapping of text in a div. It should operate like a slider/carousel for text.
我试图延迟 div 中的文本交换。它应该像文本的滑块/旋转木马一样操作。
I must have the code wrong, as the final text replacement never happens.
我一定是代码错了，因为最终的文本替换永远不会发生。
Also, how would I animate introducing the replacement text (window blinds, for eg.)?
另外，我将如何动画介绍替换文本（例如百叶窗）？
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script type="text/javascript">
$(document).ready(function() {
$("#showDiv").click(function() {
$('#theDiv').show(1000, function() {
setTimeout(function() {
$('#theDiv').html('Here is some replacement text', function() {
setTimeout(function() {
$('#theDiv').html('More replacement text goes here');
}, 2500);
});
}, 2500);
});
}); //click function ends
}); //END $(document).ready()
</script>
</head>
<body>
Below me is a DIV called "theDiv".<br><br>
<div id="theDiv" style="background-color:yellow;display:none;width:30%;margin:0 auto;">
This text is inside the Div called "theDiv".
</div><br>
<br>
<input type="button" id="showDiv" value="Show DIV">
</body>
</html>
回答by j08691
.html()only takes a string OR a function as an argument, not both. Try this:
.html()只需要一个字符串或一个函数作为参数，而不是两者。尝试这个：
$("#showDiv").click(function () {
$('#theDiv').show(1000, function () {
setTimeout(function () {
$('#theDiv').html(function () {
setTimeout(function () {
$('#theDiv').html('Here is some replacement text');
}, 0);
setTimeout(function () {
$('#theDiv').html('More replacement text goes here');
}, 2500);
});
}, 2500);
});
}); //click function ends
回答by Yuval
Try this:
尝试这个：
function explode(){
alert("Boom!");
}
setTimeout(explode, 2000);
回答by iconoclast
You can also use jQuery's delay()methodinstead of setTimeout(). It'll give you much more readable code. Here's an example from the docs:
您也可以使用jQuery 的delay()方法代替setTimeout(). 它会给你更多可读的代码。这是文档中的一个示例：
$( "#foo" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
The only limitation (that I'm aware of) is that it doesn't give you a way to clear the timeout. If you need to do that then you're better off sticking with all the nested callbacks that setTimeoutthrusts upon you.
唯一的限制（我知道）是它没有为您提供清除超时的方法。如果您需要这样做，那么最好坚持使用所有setTimeout强加给您的嵌套回调。
回答by Shahar Dudai
This is how I solved the problem The menu closes a few seconds after mouse out (that if hover didn't fire),
这就是我解决问题的方法鼠标移开几秒钟后菜单关闭（如果悬停没有触发），
//Set timer switch
$setM_swith=0;
$(function(){
$(".navbar-nav li a").click(function(event) {
if (!$(this).parent().hasClass('dropdown'))
$(".navbar-collapse").collapse('hide');
});
$(".navbar-collapse").mouseleave(function(){
$setM_swith=1;
setTimeout(function(){
if($setM_swith==1) {
$(".navbar-collapse").collapse('hide');
$setM_swith=0;}
}, 3000);
});
$(".navbar-collapse").mouseover(function() {
$setM_swith=0;
});
});
