前言

在生活中，常有定时做某事，或者循环做某事的需求，如设置2个小时煲汤，饲料机器定时、不断地的投喂物料。在js代码世界里，我们也需要定时或者循环干某件事，由此需要用到js中内置的两个函数：setTimeout、setInterval

setTimeout()函数是一个延迟函数，只执行一次。

setInterval()函数是一个循环函数，会重复执行。

setTimeout

setTimeout(函数f, 毫秒数m)：等待m毫秒数后，执行函数f，并返回定时器ID。

    <script>let startTime = new Date()setTimeout(function () {let endTime = new Date()console.log('2')console.log('endTime-startTime: ', endTime - startTime)}, 1000)console.log('1')</script>

结果：

setTimeout()函数类似于一个异步函数，它使得程序不会按照步骤执行，因此首先打印字符串1，程序运行1秒后，打印字符串2，并输出程序运行的时间。

setTimeout()函数应用之点名器

目标：点击开始点名按钮，屏幕上每间隔400毫秒打印一个人名，再次点击按钮时，暂停点名。

思路：

使用Math.random、Math.floor内置对象随机输出一个人名。
在输出人名函数中，循环调用setTimeout()函数。
clearTimeout(定时器ID)：可以停止定时器。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>点名器</title><style>*{margin: 0;padding: 0;}#container{margin: 0 auto;width: 350px;background-color: #cccccc;}#main{height: 200px;text-align: center;line-height: 200px;font-size: large;color: red;}#footer{height: 30px;}</style>
</head>
<body><div id="container"><div id="main">准备好了吗？开始点名了！！！</div><div id="footer"><button id="desc" style="font-size: 18px;margin-left: 140px;" onclick="btn()">开始点名</button></div></div><script>var nameLists = ['张三', '李四', '王五', '赵六', '小明', '小红', '小方']var time = nullfunction show() {let index = Math.floor(Math.random()*nameLists.length)document.getElementById('main').innerHTML = nameLists[index]time = setTimeout('show()', 200)}function btn() {if (time == null) {document.getElementById('desc').innerHTML = '停止点名'show()} else {clearTimeout(time)time = nulldocument.getElementById('desc').innerHTML = '开始点名'}}</script>
</body>
</html>

setInterval

setInterval函数与setTimeout函数用法非常相似。

setInterval(函数f, 毫秒数m)：每间隔m毫秒，就执行函数f，其返回值是定时器ID。

通过clearInterval(定时器ID)，也可以停止该定时器。

    <script>let startTime = new Date()setInterval(function () {let endTime = new Date()console.log('2')console.log('endTime-startTime: ', endTime - startTime)}, 1000)console.log('1')</script>

结论：基本上每隔1秒就输出字符串2。和setTimeout函数相比，它是循环执行的。

setInterval应用之重写点名器

<script>var nameLists = ['张三', '李四', '王五', '赵六', '小明', '小红', '小方']var time = nullfunction show() {let index = Math.floor(Math.random()*nameLists.length)document.getElementById('main').innerHTML = nameLists[index]}function btn() {if (time == null) {document.getElementById('desc').innerHTML = '停止点名'time = setInterval('show()', 200)} else {clearInterval(time)time = nulldocument.getElementById('desc').innerHTML = '开始点名'}}</script>

JS中的setTimeout和setInterval函数相关推荐

js中计时器setTimeout、setInterval、requestAnimationFrame区别
转载自:https://www.cnblogs.com/xiaohuochai/p/5777186.html 本文仅用于作为学习笔记计时器一直是javascript动画的核心技术.而编写动画循环的关 ...
JS中的变量提升和函数提升
console.log(a); var a = 1 如上面代码中可以看出,由于JS是从上到下一行行的执行,因此很多人看到这一串代码的时候,会认为由于log之前没有定义a,因此会输出underfind, ...
js中的SetTimeOut
1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function ...
js基础之setTimeout与setInterval原理分析
setTimeout与setInterval概述 setTimeout与setInterval是JavaScript引擎提供的两个定时器方法,分别用于函数的延时执行和循环调用.前者的主要思想是通过一个 ...
JavaScript 中的 setTimeout 和 setInterval 方法
有时您不希望函数立即运行.您希望它重新执行,甚至在特定时间间隔后重复运行.JavaScript 为我们提供了两种实现方法: setTimeout 和 setInterval.下面,我们将来理解这两个方 ...
AS3中，setTimeOut、setInterval、Timer区别
setTimeOut:设置超时时间,只会执行一次! setInterval:设置一个间隔时间,间隔多久会触发一次!除非remove,否则会永久执行下去! Timer:设置一个间隔时间,有次数限制,只执 ...
js中变量名提升和函数名提升
首先,js中变量没有块级作用域,但是有函数作用域,即只有函数可以约数变量的作用域. 并且,函数的实质也是一个变量,所以可以改变它的值,即赋值.所以变量名提升和函数名提升非常相像. 1.变量名的提升发生 ...
关于JS中的setTimeout()
1.setTimeout()基础 setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行.它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器. var timerId = s ...
js中的变量提升和函数提升——精炼版
javaScript中用var定义变量时存在变量提升(ES6及之后的let/const定义变量时为块级作用域无变量提升,ES6之前js没有块级作用域),比如: console.log(a); // 不 ...

JS中的setTimeout和setInterval函数

前言

setTimeout

setTimeout()函数应用之点名器

setInterval

setInterval应用之重写点名器

JS中的setTimeout和setInterval函数相关推荐

最新文章

热门文章