如何在javascript中添加延迟？
[英]How to add a delay in javascript?
问题描述
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".box02").hide();
$("#select-02").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("title")=="0b"){
$(".box02").hide();
$(".none").show();
}
if($(this).attr("title")=="1b"){
$(".box02").hide();
$(".1b").show();
}
if($(this).attr("title")=="2b"){
$(".box02").hide();
$(".2b").show();
}
});
}).change();
});
</script>
</head>
<body>
<select name="roomcount" id="select-02">
<option title="0b">---</option>
<option title="1b">1</option>
<option title="2b">2</option>
</select><br/><br/>
<p class="current count">
<b>Content:</b>
<br/>
<div class="padding-box">
<span class="none box02">...</span>
<span class="1b box02">show content 1 with delay</span>
<span class="2b box02">show content 2 with delay</span>
</div>
</p>
</html>
How can I add a delay between a transform of a 'span' to another 'span'? 
如何在'span'到另一个'span'的变换之间添加延迟？ Please only change something in the jquery script, because I am using it on multiple sites and can't easily update them and to just change the code it's easier to change. 请仅更改jquery脚本中的内容，因为我在多个站点上使用它并且无法轻松更新它们，只是更改代码更容易更改。
An example of this delay is on this page: http://store.apple.com/us/buy-mac/mac-pro?product=ME253LL/A&step=config if you change a radio input there is a small delay before it changes. 这个延迟的一个例子是在这个页面上： http ： //store.apple.com/us/buy-mac/mac-pro？product = ME253LL / A＆step = config如果你改变一个无线电输入，它之前有一个小的延迟变化。
Thanks, Sake 谢谢，清酒
3 个解决方案
解决方案1
2 2014-03-30 12:21:40
use setTimeout() . 使用setTimeout() 。
The function accepts a function to be executed and milliseconds to wait for execution 该函数接受要执行的函数和等待执行的毫秒数
For example, if you want to delay an execution of a function by 5 seconds you can do this: 例如，如果要将函数执行延迟5秒，可以执行以下操作：
setTimeout(functionName,5000);
Also note, 1 second = 1000 milliseconds. 另请注意，1秒= 1000毫秒。
If you don't have a function, you can put your code in a anonymous function. 如果您没有函数，可以将代码放在匿名函数中。
setTimeout(function(){
//do something here
},5000);
Also, there is delay() function in jquery, which is used for animation 此外，jquery中还有delay()函数，用于动画
解决方案2
0 已采纳 2014-03-30 12:26:06
Use .delay() , .fadeIn() and .fadeOut() effects. 使用.delay() .fadeIn()和.fadeOut()效果。 Try this: 尝试这个：
$(document).ready(function(){
$(".box02").hide();
$("#select-02").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("title")=="0b"){
$(".box02").delay(600).fadeOut(400);
$(".none").delay(600).fadeIn(400);
}
if($(this).attr("title")=="1b"){
$(".box02").delay(600).fadeOut(400);
$(".1b").delay(600).fadeIn(400);
}
if($(this).attr("title")=="2b"){
$(".box02").delay(600).fadeOut(400);
$(".2b").delay(600).fadeIn(400);
}
});
}).change();
});
解决方案3
0 2014-03-30 12:26:18
$(".box02").hide();
$("#select-02").change(function(){
$( "select option:selected").each(function(){
if($(this).attr("title")=="0b"){
$(".box02").delay(100).slideUp(500);
$(".none").delay(100).slideDown(500);
}
if($(this).attr("title")=="1b"){
$(".box02").delay(100).slideUp(500);
$(".1b").delay(100).slideDown(500);
}
if($(this).attr("title")=="2b"){
$(".box02").delay(100).slideUp(500);
$(".2b").delay(100).slideDown(500);
}
});
}).change();
Demo: 演示：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.