JavaScript中的定时器详解
前言
JavaScript 中有两种定时器:
setTimeout():指定时间后执行一段代码(延迟执行)。
setInterval():每隔一段时间执行一段代码(间隔执行)。
下面单独对两种计时器进行讲解。
setTimeout()
创建定时器:
setTimeout(() => console.log("我在两秒后被输出!"), 2*1000); // 1000 = 1s
// 执行上述代码,两秒后会在控制台输出:我在两秒后被输出!
setTimeout() 中共有 4 个参数,这里只使用两个参数,第一个参数是一个箭头函数,第二个参数表示在多少秒后执行这个箭头函数。这个过程称为回调,这个箭头函数称为回调函数。
回调函数:
将一个函数作为一个参数传入另一个函数,另一个函数执行完成后再执行传入的函数。上述代码中,箭头函数被当作参数传入 setTimeout() ,setTimeout() 两秒后执行完毕, 于是开始执行箭头函数,所以我们看到的结果会延迟两秒才输出。
箭头函数:
箭头函数与普通函数的含义是相同的,只是表示方式不同。因为箭头函数非常简洁,所以常被嵌入其他函数。如果想深入了解请参考其他资料,这里不再赘述。
取消定时器:
在创建这个定时器时会返回这个定时器任务的唯一标识符:
let t = setTimeout(() => console.log("我在两秒后被输出!"), 2*1000); // 1000 = 1s
// t 即是一个标识符,但它不是我们认为的那种标识符,你可以打印出来试试!
clearTimeout() 用于取消一个定时任务,前提是这个定时任务还没被触发:
clearTimeout(t); // 传入定时任务的标识符
console.log("任务取消,两秒后我不会有任何输出!")
setInterval()
创建定时器:
参数的用法与 setTimeout() 一致,区别在于,这个定时器它会一直循环执行,运行下面的代码查看效果:
let t = setInterval(() => console.log("每隔一秒我会被输出一次!"), 1000)
取消定时器:
clearInterval() 用于取消循环定时任务,运行以下代码查看效果:
let t = setInterval(() => console.log("每隔一秒我会被输出一次!"), 1000);
// 用上面学到的 setTimeout() 来取消循环定时任务
setTimeout(() => {clearInterval(t); console.log("我在五秒时被取消!");
;}, 5*1000);
深入理解定时器
在深入理解定时器前,我们需要了解一下 JavaScript 的单线程。因为 JavaScript 是单线程的,所以每次只能执行一段代码。JavaScript 中的任务执行有一个队列的概念,即任务会被排进队列按先入先出的顺序执行。
setTimeout() 定时器演示:
let i = 0;
console.log(i);
setTimeout(() => console.log("我在两秒后被输出!"), 2*1000);
console.log("Hello world!");
用动画来演示一下下面代码的执行过程:
程序中的代码会被逐个添加到队列中,当执行到 setTimeout() 时,不会立即被添加到队列中,定时器会被延迟两秒。在定时器延迟的过程中,程序不会等待,而是直接执行下一段代码,所以 “Hello world!” 会提前被输出。两秒之后,定时器任务会被添加到队列中,并输出 “我在两秒后被输出!” 这句话。
希望动画能让大家理解!这里队列的动画实质上不是这样,队列有进有出,定时器任务在两秒后被添加到队列中,由于程序执行速度非常快,队列里面的代码理论上已经执行完了,此时的队列应该是空的。动画制作麻烦,所以我没有删除队列中的代码,大家可以把队列里的代码想象成已经执行完的代码。
setInterval() 定时器演示:
和 setTimeout() 理论一样,区别在于 setInterval() 每隔一段时间就会给队列添加一个定时任务。
使用 setInterval() 有些问题需要注意,比如当代码遇到阻塞时,循环定时的任务会被累积,阻塞结束时,这些累积的任务会无视间隔时间连续执行,因为它们已经被添加到队列中。看下面的演示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>演示</title>
</head>
<body><script>let t = setInterval(() => alert("我会阻塞程序!如果你不及时点确认的话。"), 2*1000);</script>
</body>
</html>
看看执行结果:
当警示框弹出时,及时点击确定不会造成阻塞,因此,警示框会每隔一秒弹出一次。中间没有及时点击确认,导致任务堆积,阻塞结束后会连续显示出来。
setTimeout() 实现循环定时:
let i = 0;
function timer() {i++;console.log(i);// 函数内定时器的回调函数会继续调用 timer()// 每秒自调用一次,因此实现类似死循环的效果setTimeout( () => { timer(); }, 1000);
}
// 启动函数
timer()
程序会每隔一秒输出一个值。
结语
一般来说,最好不要使用 setInterval() ,而是使用 setTimerout() 来实现 setInterval() 的效果,这样可以有效的避免阻塞带来的问题。
setInterval() 还存在一个问题,当执行循环任务中的代码时,如果执行所需的时间大于循环任务的间隔时间,则当前循环任务会被取消。这个问题之后会进行补充!
定时器实战:HTML+CSS+JavaScript实现轮播图效果
JavaScript中的定时器详解相关推荐
- JavaScript中getBoundingClientRect()方法详解
JavaScript中getBoundingClientRect()方法详解 getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bo ...
- JavaScript中的this详解
前 言 this JavaScript中的this详解 this详解 This的指向有几种情况?如何人为控制? [谁调用this,this指向谁!!] [this的指向,不关心this写在哪 ...
- JavaScript中e.keycode详解
概述 学过javascript(简称js)的朋友应该都知道e.keycode事件在网页中有着重要作用,下面分享一下关于e.keycode的具体应用和详解 实例 1.获取按下的键盘按键Unicode值: ...
- JavaScript中的正则表达式详解
正则表达式(Regular Expression)是一门简单语言的语法规范,是强大.便捷.高效的文本处理工具,它应用在一些方法中,对字符串中的信息实现查找.替换和提取操作. 正则表达式在人们的印象中可 ...
- JavaScript中setAttribute用法详解
setAttribute基本用法 element.setAttribute(attributename,attributevalue) setAttribute() 方法添加指定的属性,并为其赋指定的 ...
- javascript中强制类型转换详解+总结
javascript中一共有六种类型:Number,String,Boolean,Undefined,Object,function.可以用typeof来查看声明的变量的类型.注意,typeof是操作 ...
- JavaScript中的遍历详解
编程这么多年,要是每次写遍历代码时都用 for 循环,真心感觉对不起 JavaScript 语言~ 对象遍历 为了便于对象遍历的测试,我在下面定义了一个测试对象 obj. 测试对象 // 为 Obje ...
- JavaScript中Window.event详解
event代表事件的状态,例如触发event对象的元素.鼠标的位置及状态.按下的键等等. event对象只在事件发生的过程中才有效. event的某些属性只对特定的事件有意义.比如,fromEleme ...
- JavaScript中 FormData 对象详解
简介: FormData 对象用以将数据编译成键值对,以便用 XMLHttpRequest 来发送数据. 主要用于:发送表单数据,也可用于发送带键数据(keyed data),而独立于表单使用. 如果 ...
最新文章
- Microsoft 的 OpenSource Licence
- JobTracker节点后台线程之RetireJobs
- 如何在MacOS上创建第一个iOS Flutter应用
- VTK:图像方向用法实战
- TCP/IP的七层负载均衡
- 使用RESTful客户端API进行GET / POST
- Java分布式篇4——Redis
- js 操作Listbox js 获取Listbox选择的值的代码
- 问号后面能加感叹号吗_TOPIK|你还在因为不会用原稿纸而扣分吗
- 【PAT乙】1033 旧键盘打字 (20分) 字符串
- tensorflow应用问题记录
- 福彩3D Matlab统计分析,基于ANSYS和遗传算法的3D打印桨叶结构优化设计的制作方法...
- Python 植物大战僵尸代码实现
- Jmeter下载及安装方法
- 用Unity同时开发【微信小游戏】【安卓】【IOS】游戏#5.5.1 窗口管理器
- git撤销commit
- 含泪赔了近200万,我终于明白不是什么人都能干电商的……
- 精读-软件测试的艺术之调试,极限测试和因特尔应用系统的测试
- Kali Linux渗透测试——MSF基础篇
- 马云的故事:缔造阿里巴巴帝国秘诀