一文详解JavaScript定时器

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

什么是定时器?

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

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

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

setTimeout()

语法:

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>
责任编辑:华轩 来源: 今日头条
相关推荐

2021-08-11 10:10:26

Linux定时器数组

2023-02-23 19:32:03

DOMJavascript开发

2017-03-06 14:08:38

JavaScript单线程setTimeout

2023-02-22 18:06:35

函数javascript面向对象编程

2012-08-07 09:27:40

JavaScript

2022-08-15 15:39:23

JavaScript面向对象数据

2022-06-26 00:18:05

企业产品化变量

2010-07-28 15:56:22

FlexTimer定时

2009-11-11 10:14:10

linux定时器操作系统

2021-02-11 09:01:32

CSS开发 SDK

2021-09-07 09:46:40

JavaScriptGenerator函数

2021-10-11 10:19:48

Javascript 高阶函数前端

2022-09-26 08:26:38

软件定时器函数

2016-09-12 14:07:14

Android 定时器

2019-09-03 10:05:27

Linux监控系统

2021-09-06 07:59:56

死锁工具多线编程

2021-03-31 08:33:17

SysTick定时器SysTick定时器

2009-04-12 08:51:50

Symbian诺基亚移动OS

2013-07-29 10:10:40

TCP协议TCP定时器TCP

2011-02-23 10:20:45

点赞
收藏

51CTO技术栈公众号