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>