setTimeout( )
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method。请先看以下一个简单, 这是没有实际用途的例子, 只是用来示范 setTimeout( ) 的语法。
定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。
语法: setTimeout(code,millisec)
参数： code （必需）：要调用的函数后要执行的 JavaScript 代码串。millisec（必需）：在执行代码前需等待的毫秒数。 提示： setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
clearTimeout( )
我们再来一起看一下 clearTimeout( )，
clearTimout( ) 有以下语法 :
clearTimeout(timeoutID)
要使用 clearTimeout( ), 我们设定 setTimeout( ) 时 , 要给予这 setTimout( ) 一个名称 , 这名称就是 timeoutID , 我们叫停时 , 就是用这 timeoutID 来叫停 , 这是一个自定义名称 , 但很多人就以 timeoutID 为名。
在下面的例子 , 设定两个 timeoutID, 分别命名为 meter1 及 meter2, 如下 :
timeoutID ↓ meter1 = setTimeout(“count1( )”, 1000) meter2 = setTimeout(“count2( )”, 1000)
使用这 meter1 及 meter2 这些 timeoutID 名称 , 在设定 clearTimeout( ) 时 , 就可指定对哪一个 setTimeout( ) 有效 , 不会扰及另一个 setTimeout( ) 的操作。
js代码如下:
/**
* 倒计时函数
* 需要在按钮上绑定单击事件
* 如: <INPUT contentEditable=false value=发送短信 type=button data-cke-pa-onclick="setInterval('countDown(this,30)',1000);" data-cke-editable="1">
* 30代表秒数，需要倒计时多少秒可以自行更改
*/
function countDown(obj,second){
// 如果秒数还是大于0，则表示倒计时还没结束
if(second>=0){
// 获取默认按钮上的文字
if(typeof buttonDefaultValue === 'undefined' ){
buttonDefaultValue = obj.defaultValue;
}
// 按钮置为不可点击状态
obj.disabled = true;
// 按钮里的内容呈现倒计时状态
obj.value = buttonDefaultValue+'('+second+')';
// 时间减一
second--;
// 一秒后重复执行
setTimeout(function(){countDown(obj,second);},1000);
// 否则，按钮重置为初始状态
}else{
// 按钮置未可点击状态
obj.disabled = false;
// 按钮里的内容恢复初始状态
obj.value = buttonDefaultValue;
}
}
html代码如下:
<h1>
js按钮三十秒倒计时效果</h1>
<hr />
<p>
<input onclick="countDown(this,30);" type="button" value="发送短信" /></p>
<hr />
<h3>
琼台博客 qttc.net</h3>
<p>
在按钮上绑定的js单击事件中‘30’代表倒计时秒数，可以在绑定时设置秒数，灵活应用。 当然，这个倒计时只是前端控制，如果需要更安全的做法应该是服务器端也做判断。</p>
下面请看 clearTimeout()的案例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
x = 0
y = 0
function count1()
{ x = x + 1
document.display1.box1.value = x
meter1=setTimeout("count1()", 1000)
}
function count2()
{ y = y + 1
document.display2.box2.value = y
meter2=setTimeout("count2()", 1000)
}
</script> </head>
<body>
<p> </br>
<form name="display1">
<input type="text" name="box1" value="0" size=4 >
<input type=button value="停止计时" onClick="clearTimeout(meter1) " >
<input type=button value="继续计时" onClick="count1() " >
</form>
<p>
<form name="display2">
<input type="text" name="box2" value="0" size=4 >
<input type=button value="停止计时" onClick="clearTimeout(meter2) " >
<input type=button value="继续计时" onClick="count2() " >
</form>
<script>
count1()
count2()
</script>
</body>
</html>