setInterval() 方法
setInterval() 間隔指定的毫秒數不停地執行指定的代碼
setInterval() 第一個參數是函數(function)。第二個參數間隔的毫秒數
1000 毫秒是一秒。
setTimeout() 方法
與setInterval() 方法用法相同
示例
每三秒彈出 "hello"
setInterval(function(){
alert("Hello")
},3000);
等待3秒,然後彈出 “Hello”:
setTimeout(function(){
alert("Hello")
},3000);
如何停止執行?
clearInterval() 方法用於停止 setInterval() 方法執行的函數代碼。
clearTimeout() 方法用於停止執行setTimeout()方法的函數代碼。
區別
setTimeout() 方法只會在規定時間內行一次,而setInterval() 方法會無限執行。
示例
點擊開始按鈕div變色(無限循環),點擊停止,停止變色
效果圖
實現代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.oDiv {
width: 100px;
height: 100px;
background-color: aqua;
}
.lDiv {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="oDiv"></div>
<input id="btn1" type="button" value="開始" />
<input id="btn2" type="button" value="停止" />
</body>
<script src="jquery-3.4.1.js"></script>
<script>
$("#btn1").click(function() {
a = setInterval(function() {
$(".oDiv").toggleClass("lDiv");
}, 100)
})
$("#btn2").click(function() {
clearInterval(a);
})
</script>
</html>