setInterval():按照指定的周期(以毫秒计)来调用函数或计算表达式
setTimeout():在指定的毫秒数后调用函数或计算表达式,只调用一次
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
let i=0;
function t(){
console.log(i++);
}
setInterval("t()",5000);//5秒后执行t()方法,之后每隔5秒执行一次;
setTimeout("t()",5000);//5秒后执行方法t()一次就结束
</script>
</head>
<body>
</body>
</html>
clearInterval():由setInterval()返回值作为的ID,可清除setInterval()设置的timeout
例子:
<html>
<head>
<meta charset="UTF-8">
<title>clearInterval方法</title>
<script type="text/javascript">
var i=0;
function showIndex(){
document.getElementById("current_data").innerHTML=i;
i++;
}
</script>
</head>
<body>
<div id="current_data">110</div>
<script type="text/javascript">
var id = window.setInterval("showIndex()", 1000);
function stopTime(){
window.clearInterval(id);
}
</script>
<input type="button" value="停止" onclick="stopTime()">
</body>
</html>
clearTimeout取消由 setTimeout() 方法设置的 timeout
例子:
<html>
<head>
<meta charset="UTF-8">
<title>clearTimeout方法</title>
<script type="text/javascript">
var i = 0;
var id;
function startCount(){
document.getElementById("current_data").innerHTML=i;
i++;
id = window.setTimeout("startCount()", 3000);
}
function stopCount(){
window.clearTimeout(id);
}
</script>
</head>
<body>
<div id="current_data">36</div>
<script>
startCount();
</script>
<br>
<input type="button" value="停止" onclick="stopCount()">
</body>
</html>