setInterval(倒计时实例)和setTimeout的用法

最新推荐文章于 2025-05-29 14:47:07 发布

snn1410

最新推荐文章于 2025-05-29 14:47:07 发布

阅读量1.3w

点赞数

分类专栏： js

js 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍了JavaScript中的定时器方法，包括setInterval()和setTimeout()及其对应的清除方法clearInterval()和clearTimeout()。通过实例展示了如何使用这些方法实现定时操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1,HTML DOM setInterval() 方法
定义和用法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法
setInterval(code,millisec[,"lang"])
参数描述
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
返回值
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
2,HTML DOM clearInterval()方法
定义和用法
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
语法
clearInterval(id_of_setinterval)
参数描述
id_of_setinterval 由 setInterval() 返回的 ID 值。

实例：

html页面

js页面

点击按钮的时候，让按钮变灰，一分钟倒计时，到时间就把按钮重新使用

<pre name="code" class="javascript">$(document).ready(function() {
    
    function enableBtn(){
    
        $("#validateBtn").removeAttr("disabled");   
        
    }
    var seed=60;//60秒
    var t1=null;
	$("#validateBtn").bind("click", function() {
                $("#validateBtn").attr("disabled","disabled");  
                
                t1 = setInterval(tip, 1000);
                
				var params = {
					"phoneNo":$('#phoneNo').val()
				};

				var param = JSON.stringify(params);
				var paramObj = {
					"inparam" : param
				};

				$.ajax({
							url : "kehu/getCode",
							async : true,//同步
							type : 'POST',
							data : paramObj,
							success : function(data, textStatus) {
								//alert(data);
                                if(data == 'success'){
//                                	setTimeout(enableBtn, 60000);
                                    
                                }
							},
							error : function(XMLHttpRequest, textStatus,
									errorThrown) {
								alert("error");
								//alert("statusText=" + textStatus);
							}

						});
			});
	function tip() {
		seed--;
		if (seed < 1) {
			enableBtn();
			seed = 60;
			$("#info").text('');
            var t2 = clearInterval(t1);
		} else {
			$("#info").text(seed);
		}
	}

时间

下面这个例子将每隔 50 毫秒调用 clock() 函数。您也可以使用一个按钮来停止这个 clock：

 
<html> 
<body> 
<input type="text" id="clock" size="35" /> 
<script language=javascript> 
var int=self.setInterval("clock()",50) 
function clock() 
{ 
var t=new Date() 
document.getElementById("clock").value=t 
} 
</script> 
</form> 
<button onclick="int=window.clearInterval(int)"> 
Stop interval</button> 
</body> 
</html>

setTimeout :
1,HTML DOM setTimeout() 方法
定义和用法
setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
语法
setTimeout(code,millisec)
参数描述
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
提示和注释
提示：setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。

<html> 
<head> 
<script type="text/javascript"> 
function timedMsg() 
{ 
var t=setTimeout("alert('5 seconds!')",5000) 
} 
</script> 
</head> 
<body> 
<form> 
<input type="button" value="Display timed alertbox!" 
onClick="timedMsg()"> 
</form> 
<p>Click on the button above. An alert box will be 
displayed after 5 seconds.</p> 
</body> 
</html>

2,HTML DOM clearTimeout() 方法
定义和用法clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。语法clearTimeout(id_of_settimeout)
参数描述
id_of_setinterval 由 setTimeout() 返回的 ID 值。该值标识要取消的延迟执行代码块。
实例下面的例子每秒调用一次 timedCount() 函数。您也可以使用一个按钮来终止这个定时消息：

<html> 
<head> 
<script type="text/javascript"> 
var c=0 
var t 
function timedCount() 
{ 
document.getElementById('txt').value=c 
c=c+1 
t=setTimeout("timedCount()",1000) 
} 
function stopCount() 
{ 
clearTimeout(t) 
} 
</script> 
</head> 
<body> 
<form> 
<input type="button" value="Start count!" onClick="timedCount()"> 
<input type="text" id="txt"> 
<input type="button" value="Stop count!" onClick="stopCount()"> 
</form> 
</body> 
</html>