版权声明:本文为博主原创文章,未经博主允许不得转载——Cc。 https://blog.csdn.net/mufeng633/article/details/75091516
定时函数
--------------定时函数-------------
定时函数:
setTimeout()
用于在指定的毫秒后调用函数 或计算表达式
语法:
setTimeout(“调用的函数名称”,等待的毫秒数)
注:调用一次,执行一次
setInterval()
可按照指定的周期(以毫秒计)来调用函数或计算表达式,
语法:setInterval(“调用的函数名称”,周期性调用函数之间间隔的秒数)
注: 会不停的调用函数,直到函数被关闭或其他方法强制停止,调用一次,按照周期一直运行
————-清除定时函数—————-
(1)clearTimeout() 和 clearInterval()
**clearTimeout() 函数用来清除由setTimeout()函数设置的定时器**
如:clearTimeout( setTimeout()返回的ID值 )
(2)clearInterval()
用来清除由 setInterval() 函数设置的定时器。
setTimeout() 只执行一次函数,如果多次调用函数,则需要使用setInterval()或者让被调用的函数再次调用setTimeout();
———实例 ————
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var num=0;
//清除无限循环 变量
var time1;
var time2;
function addNum(){
document.getElementById("numArea").innerHTML="数字:"+(num++);
}
/*无限循环调用 过一秒 就将num 加1 */
function set1(){
time1=setInterval("addNum()",1000);
}
/*只调用一次, 过一秒 就将num 加1 并运行一次 */
function set2(){
time2=setTimeout("addNum()",1000);
}
/*清除setInterval 无限循环 函数*/
function clear1(){
clearInterval(time1);
}
function clear2(){
clearTimeout(time2);
}
</script>
</head>
<body>
<p id="numArea">数字:0</p>
<!--根据后面的毫秒数 一直循环加 无限循环-->
<input type="button" value="setinterval定时" onclick="set1()"/>
<!--根据后面的毫秒数 只运行一次-->
<input type="button" value="setTimeout定时" onclick="set2()"/>
<!--清除方法-->
<input type="button" value="清除 setinterval定时 按钮" onclick="clear1()"/>
<input type="button" value="清除setTimeout 定时 按钮" onclick="clear2()"/>
</body>
</html>