一文详解JavaScript定时器但是文详如果使用循环加延时

2024-06-30 21:43:43 [百科] 来源：避面尹邢网

一文详解JavaScript定时器

作者：黑猫编程 2023-02-28 18:09:53开发前端定时器就是文详可以定时一段时间后执行某些功能，或者每隔一段时间重复执行某些功能。时器

什么是文详定时器？

定时器就是可以定时一段时间后执行某些功能，或者每隔一段时间重复执行某些功能。时器

定时器和循环的文详区别要尤其注意，循环结构内部使用延时函数也可以实现定时器的时器重复执行效果，但是文详如果使用循环加延时，程序是时器阻塞的，会一直停留在循环过程中，文详循环结构后面的时器程序无法执行。即计算机资源一直处于被占用状态，文详消耗也很大。时器

一文详解JavaScript定时器但是文详如果使用循环加延时

定时器是文详只在触发的时刻执行指定功能，没有到触发时刻程序不会阻塞，时器按照顺序，文详正常执行定时器后面的程序。

一文详解JavaScript定时器但是文详如果使用循环加延时

setTimeout()

语法：

一文详解JavaScript定时器但是文详如果使用循环加延时

setTimeout(func,millisec)

参数	描述
func	要调用的函数后要执行的 JavaScript 代码串。
millisec	在执行代码前需等待的毫秒数。

功能：在指定的毫秒数后调用函数。

setTimeout(function(){ 
alert("start");
}, 3000);

setInterval()

语法：

setInterval(func,millisec)

参数	描述
func	要调用的函数后要执行的 JavaScript 代码串。
millisec	周期性执行func的时间间隔，以毫秒计。

功能：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。

setInterval(function(){ 
console.log("hioier.com");
}, 1000);

简易计时器项目

实现一个计时器，绿色方框内数字从0开始，每隔1s增加1。

<style>
#d1{ 
width:200px;
height:200px;
color:white;
font-size:100px;
background:green;
text-align:center;
line-height:200px;
}
</style>

<body>
<div id="d1">0</div>
<script>

let d1 = document.getElementById("d1");

let n = 0;
setInterval(function(){ 
d1.innerHTML = n++;
}, 1000);
</script>
</body>

跳跃坠落两张图片循环切换

例如：两张图片的名字分别为11.jpg和12.jpg，只需设置一个变量在11和12之间切换即可。

<style>
#d1 { 
width: 500px;
height: 400px;
}
</style>

<body>
<img id="d1" src="images/11.jpg"/>
<script>

let d1 = document.getElementById("d1");
let n = 11;
setInterval(function(){ 
n++;
if(n > 12)
n = 11;

d1.src = `images/${ n}.jpg`;
}, 500);

</script>
</body>

停止定时器，按下停止跳跃按钮，停止跳跃。

<body>
<img id="d1" src="images/11.jpg"/>
<button id="btn_stop">停止跳跃</button>

<script>

let d1 = document.getElementById("d1");

let btn_stop = document.getElementById("btn_stop");

let n = 11;
let timer = setInterval(function(){ 
n++;
if(n > 12)
n = 11;

d1.src = `images/${ n}.jpg`;
}, 500);

btn_stop.onclick = function(){ 
clearInterval(timer);
}
</script>
</body>

拆除炸弹

炸弹倒计时10s，如果没有拆除就会爆炸，现在请你点击按钮拆除炸弹。

<style>
#d1 { 
text-align: center;
}
#d3 { 
width: 100px;
height: 100px;
color: white;
font-size: 50px;
background: green;
text-align: center;
line-height: 100px;
margin: 0 auto;
}
</style>

<div id="d1">
<button id="btn">
开始拆弹
</button>
<div id="d2">
<img src="images/7.gif"/>
<div>
<div id="d3">
10
</div>
</div>
</div>
</div>

<script>
let d3 = document.getElementById("d3");
let btn = document.getElementById("btn");

let n = 10;

let timer = setInterval(function(){ 

d3.innerHTML = n--;

if(n < 0){ 
alert("BOOM!");
n = 10;
}
}, 1000);

btn.onclick = function(){ 
clearInterval(timer);
alert("拆弹成功！");
}
</script>