setInterval和setTimeout详解
JS(setinterval和settimeout)
·
1.setInterval()
解释：
Window 和 Worker 接口提供的 setInterval() 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔。
它返回一个 interval ID，该 ID 唯一地标识时间间隔，因此你可以稍后通过调用 clearInterval() 来移除定时器。
1.1语法
var intervalID = setInterval(func, [delay, arg1, arg2, ...]);
var intervalID = setInterval(function[, delay]);
var intervalID = setInterval(code, [delay]);
参数：
-
func
要重复调用的函数，每经过指定 delay 毫秒后执行一次。第一次调用发生在 delay 毫秒之后。 -
code
这个语法是可选的，你可以传递一个字符串来代替一个函数对象，你传递的字符串会被编译然后每经过 delay 毫秒执行一次。这个语法因为与 eval() 存在相同的安全风险所以不推荐使用。 -
delay
是每次延迟的毫秒数（一秒等于 1000 毫秒），函数的每次调用会在该延迟之后发生。如果未指定，则其默认值为 0。参见下方的延迟限制以了解详细的 delay 的取值范围。 -
arg1, …, argN 可选
当定时器过期的时候，将被传递给 func 函数的附加参数。 -
返回值
返回值 intervalID 是一个非零数值，用来标识通过 setInterval() 创建的定时器，这个值可以用来作为 clearInterval() 的参数来清除对应的定时器。
值得注意的是，setInterval() 和 setTimeout() 共享同一个 ID 池，并且 clearInterval() 和 clearTimeout() 在技术上是可互换使用的。但是，我们应该匹配使用 clearInterval() 和 clearTimeout()，以避免代码杂乱无章，并增强代码的可维护性。
注：
数 delay 会被转换成一个有符号 32 位整数。这将 delay 限制到了 2147483647 毫秒以内，因为它在 IDL 中被指定为一个有符号整数。
1.2语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<script>
let intervalID = setInterval(myCallback, 500, 'Parameter 1', 'Parameter 2');
function myCallback(a, b)
{
console.log(a);
console.log(b);
}
//每0.5秒，'Parameter 1', 'Parameter 2'就传递给myCallback函数
</script>
</body>
</html>
1.3项目
项目1：两种颜色的切换
QQ录屏20220731082332
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
.red{
color: red;
}
.blue{
color: blue;
}
</style>
</head>
<body>
<div class="box">
<h1>点击start切换颜色,stop停止切换</h1>
<button>start</button>
<button>stop</button>
</div>
<script>
let btn1 = document.querySelector('button:nth-of-type(1)');
let btn2 = document.querySelector('button:nth-of-type(2)');
btn1.addEventListener('click',start)
btn2.addEventListener('click',stop)
let count;
function start(){
count = setInterval(changColor,1000);
function changColor(){
if(document.querySelector('h1').classList == 'red')
{
document.querySelector('h1').classList = 'blue';
}
else{
document.querySelector('h1').classList = 'red';
}
}
}
function stop()
{
clearInterval(count);
}
</script>
</body>
</html>
项目2：轮廓图(注意在当前文件夹下放4张图片)
QQ录屏20220731082236
QQ录屏20220731082332
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮番图</title>
<style>
问题1：如何显示边框
.slide{
max-width: 750px;
min-width: 320px;
margin: auto;
padding: 0 10px;
}
.slider .imgs{
max-height: 235px;
}
.slider .imgs img {
height: 100%;
width: 100%;
border-radius: 10px;
display: none;
}
.slider .imgs img.active{
display: block;
}
.slider .btns{
display: flex;
place-content: center;
}
.slider .btns span{
width: 10px;
height: 10px;
background-color: #333;
border-radius: 50%;
margin: -16px 5px 5px;
}
.slider .btns span.active{
background-color: #fff;
}
</style>
</head>
<body>
<div class="slider">
<!-- 图片容器 -->
<div class="imgs">
<!-- 轮播图默认从第一张开始显示 -->
<a href=""><img src="./images/banner-1.jpg" alt="" data-index="1" class="active" /></a>
<a href=""><img src="./images/banner-2.jpg" alt="" data-index="2" /></a>
<a href=""><img src="./images/banner-3.jpg" alt="" data-index="3" /></a>
<a href=""><img src="./images/banner-4.jpg" alt="" data-index="4" /></a>
</div>
<!-- 切换按钮数量与图片数量必须一致 -->
<div class="btns">
<span data-index="1" class="active" onclick="setActive()"></span>
<span data-index="2" onclick="setActive()"></span>
<span data-index="3" onclick="setActive()"></span>
<span data-index="4" onclick="setActive()"></span>
</div>
</div>
<script>
const imgs = document.querySelectorAll('.imgs img');
const spans = document.querySelectorAll('.btns span');
function setActive()
{
//1.清空图片和按钮状态
//2.根据按钮的自定义data-index的值，来确定是哪一个按钮
imgs.forEach((img) => {
img.classList.remove('active');
})
spans.forEach((span) => {
span.classList.remove('active');
})
event.target.classList.add('active');
imgs.forEach((img) => {
if(img.dataset.index === event.target.dataset.index)
{
img.classList.add('active');
}
})
}
// 3.定时播放
// let myevent = new Event('click');
// setInterval(() => {
// spans.forEach((span) => {
// setTimeout(() => {
// span.dispatchEvent(myevent);
// },1000)
// })
// },4000)
let myevent = new Event('click');
setInterval((arr) => {
let count = arr.shift()
spans[count].dispatchEvent(myevent);
arr.push(count);
},2000,Object.keys(imgs))
</script>
</body>
</html>
1.4可能遇到的问题
this问题：
用箭头函数
2.setTimeout
2.1语法：
var timeoutID = scope.setTimeout(function[, delay, arg1, arg2, ...]);
var timeoutID = scope.setTimeout(function[, delay]);
var timeoutID = scope.setTimeout(code[, delay]);
2.2 参数
- function
function 是你想要在到期时间 (delay毫秒) 之后执行的函数。 - code
这是一个可选语法，你可以使用字符串而不是function ，在delay毫秒之后编译和执行字符串 (使用该语法是不推荐的， 原因和使用 eval()一样，有安全风险)。 - delay 可选
延迟的毫秒数 (一秒等于 1000 毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay 取默认值 0，意味着“马上”执行，或者尽快执行。不管是哪种情况，实际的延迟时间可能会比期待的 (delay 毫秒数) 值长，原因请查看实际延时比设定值更久的原因：最小延迟时间。 - arg1, …, argN 可选
附加参数，一旦定时器到期，它们会作为参数传递给function - 返回值
返回值timeoutID是一个正整数，表示定时器的编号。这个值可以传递给clearTimeout()来取消该定时器。
需要注意的是 setTimeout() 和 setInterval() 共用一个编号池，技术上，clearTimeout() 和 clearInterval() 可以互换。但是，为了避免混淆，不要混用取消定时函数。
在同一个对象上（一个 window 或者 worker），setTimeout()或者setInterval()在后续的调用不会重用同一个定时器编号。但是不同的对象使用独立的编号池。
2.2 项目
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
</style>
</head>
<body>
<div>
<button onclick="alert_first()">点击 1秒后会提出警告</button>
<button onclick="alert_last()">点击 4秒后会提出警告</button>
</div>
<script>
function alert_first(){
setTimeout(() => {
confirm('点击 1秒后会提出警告')
},1000)
}
function alert_last(){
setTimeout(() => {
confirm('点击 2秒后会提出警告')
},1000)
}
</script>
</body>
</html>
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
0
0- 0
已为社区贡献2条内容
所有评论(0)