js中的定时器如何使用_js定时器用法-程序员宅基地
技术标签： js
JS提供了一些原生方法来实现延时去执行某一段代码，下面来简单介绍一下setTiemout、setInterval、setImmediate、requestAnimationFrame。
首先，我们先来了解一下什么是定时器：
JS提供了一些原生方法来实现延时去执行某一段代码
下面来简单介绍一下
setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
setTimeout(code,millisec,lang)
参数 描述
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
lang 可选。脚本语言可以是：JScript | VBScript | JavaScript
setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
setInterval(code,millisec,lang)
参数
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
lang 可选。 JScript | VBScript | JavaScript
setImmediate: 在浏览器完全结束当前运行的操作之后立即执行指定的函数(仅IE10和Node 0.10+中有实现)，类似setTimeout(func, 0)
var immediateId = setImmediate(func[, param1, param2, ...]);
var immediateId = setImmediate(func);
immediateId: 定时器ID
func: 回调
requestAnimationFrame: 专门为实现高性能的帧动画而设计的API，但是不能指定延迟时间，而是根据浏览器的刷新频率而定（帧）
var requestId = window.requestAnimationFrame(func);
func: 回调
上面简单的介绍了四种JS的定时器，但是常用的定时器就两种：setTimeout和setInterval。
我们今天就用这两个定时器，写两个简单的小例子吧
以下实例在每 1000 毫秒执行 clock() 函数。实例中也包含了停止执行的按钮:
<html>
<body>
<input type="text" id="clock" />
<script type="text/javascript">
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script>
<button onclick="int=window.clearInterval(int)">停止</button>
</body>
</html>
setTimeout()的小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
setTimeout(function(){
alert("Hello")},3000);
}
</script>
</body>
</html>
我们再来讲讲，如何清除定时器吧
只生成了一个定时器清除方式（例）：
var timer; function timeout(){
timer = setTimeout(function(){
alert('清除定时器')
},3000)
}
clearTimeout(timer);
如果是循环体内生成的多个定时器清除方式（例）：
var timeOut = [];
for (var number = 0; number < 100; number++) {
(function (a) {
timeOut.push(setTimeout(function () {
alert('清除定时器'+a)
}, a * 1000));
})(number);
}
for (var i = 0; i < timeOut.length; i++) {
clearTimeout(timeOut[i]);
}
JS定时器的工作原理
我们了解一下定时器的工作原理，这里将用引用How JavaScript Timers Work中的例子来解释定时器的工作原理，该图为一个简单版的原理图。
上图中，左侧数字代表时间，单位毫秒；左侧文字代表某一个操作完成后，浏览器去询问当前队列中存在哪些正在等待执行的操作；蓝色方块表示正在执行的代码块；右侧文字代表在代码运行过程中，出现哪些异步事件。该图大致流程如下：
程序开始时，有一个JS代码块开始执行，执行时长约为18ms，在执行过程中有3个异步事件触发，其中包括一个setTimeout、鼠标点击事件、setInterval
第一个setTimeout先运行，延迟时间为10ms，稍后鼠标事件出现，浏览器在事件队列中插入点击的回调函数，稍后setInterval运行，10ms到达之后，setTimeout向事件队列中插入setTimeout的回调
当第一个代码块执行完成后，浏览器查看队列中有哪些事件在等待，他取出排在队列最前面的代码来执行
在浏览器处理鼠标点击回调时，setInterval再次检查到到达延迟时间，他将再次向事件队列中插入一个interval的回调，以后每隔指定的延迟时间之后都会向队列中插入一个回调
后面浏览器将在执行完当前队头的代码之后，将再次取出目前队头的事件来执行
最后，我们再来说说需要注意的点
1、
setTimeout有最小时间间隔限制，HTML5标准为4ms，小于4ms按照4ms处理，但是每个浏览器实现的最小间隔都不同
2、因为JS引擎只有一个线程，所以它将会强制异步事件排队执行
3、如果setInterval的回调执行时间长于指定的延迟，setInterval将无间隔的一个接一个执行
4、this的指向问题可以通过bind函数、定义变量、箭头函数的方式来解决
智能推荐
springboot接收枚举值的默认方式_springboot get请求怎么接收前端传递的枚举数字-程序员宅基地
文章浏览阅读1.6k次。测试代码：@PostMapping() public void test(@RequestBody Student student){ System.out.println(student.getLover().name()); }class Student{ private Lover lover; public Lover getLover() { return lover; } public void setLover_springboot get请求怎么接收前端传递的枚举数字
【数学建模笔记】【第七讲】多元线性回归分析（二）：虚拟变量的设置以及交互项的解释，以及基于Stata的普通回归与标准化回归分析实例_stata两个虚拟变量的交互项-程序员宅基地
文章浏览阅读1.5w次，点赞24次，收藏120次。简单来说就是去量纲后的回归（因为你要比较不同变量之间的显著性的大小，那么带着量纲怎么比，所以先把量纲去掉，然后再比较）官话：为了更为精准的研究影响评价量的重要因素（去除量纲的影响），我们可考虑使用标准化回归系数。_stata两个虚拟变量的交互项
mysql-程序员宅基地
文章浏览阅读203次。有时候安装mysql后使用mysql命令时报错 Can't connect to MySQL server on localhost (10061)，或者用net start mysql 时报服务名无效，一般是因为mysql服务没有启动。这时候可以用管理身份运行cmd.exe(注意必须是管理..._c:\program files\mysql\mysql server 5.6\bin>mysqld --install install/remove
亚信科技java笔试题答案_亚信笔试题卷以及答案.docx-程序员宅基地
文章浏览阅读6.2k次，点赞3次，收藏44次。亚信联创科技校园招聘B 卷考试时间60_分钟 _考试方式(闭)卷(本试卷满分 100 分，答案请写在答题卡上)请不要在问卷上答题或涂改，笔试结束后请务必交回试卷部分内容分值备注一、计算机基础40分C/C++语言基础40分技能部分二、二选一JAVA 语言基础40分三、数据库20分总分100 分第一部分——计算机基础一、选择题(每题 2 分，总分 40分)1.CPU 状态分为目态和管态两种..._亚信科技java实习笔试题
三线城市程序员的薪资待遇怎么样？我分享提高java技术水平的几个方法_三线城市学java-程序员宅基地
文章浏览阅读1.3k次。3年对一个程序员来说是非常重要的。像我自己本身就是做程序员的，目前的薪资待遇是13K左右，虽然在我所在的公司不是最高的，但在所在的这个城市的消费水平来说，除了日常的开支，包括房租、水电、伙食、人际交往等费用之外，还能留下一部分闲钱自己存起来。不同城市的薪资待遇是不一样的，这主要是由于当地的消费水平和经济发展水平不同，所以如果你想要更高的薪资待遇，就要考虑在一线城市或者经济发达的城市工作。一个有着丰富工作经验的程序员，他的技能水平、经验和能力都比没有经验的程序员更加出色，所以他们的薪资待遇也会更高一些。_三线城市学java
Unity渲染顺序相关学习_unity overlaycamera depth-程序员宅基地
文章浏览阅读975次。1、camera（depth越小，越先渲染）2、sorting layer（值越小，越先渲染）（下面还有个sortingOrder 值越小，越先渲染）3、渲染队列renderQueue（值越小，越先渲染）4、深度值（距离相机越近该值越小，越远该值越大。）..._unity overlaycamera depth
随便推点
AAC ADTS封装实现-程序员宅基地
文章浏览阅读1.2k次。一、AAC音频格式种类有哪些AAC音频格式是一种由MPEG-4标准定义的有损音频压缩格式。AAC包含两种格式 ADIF（Audio Data Interchange Format音频数据交换格式）和ADTS（Audio Data transport Stream音频数据传输流）。ADIF特点：可以确定的找到音视频数据的开始，不需要进行在音视频数据流中间开始的解码，它的解码必须在明确的定义开始。应用场景：常用在磁盘文件中。ADTS特点：具有同步字的比特流，解码可以在这个流中任何位置开始。类似于mp_aac adts
Unity基础概念_unity基本概念-程序员宅基地
文章浏览阅读213次。像要使用Resouce类，必须创建一个 Resouce 文件夹，然后把需要的资源放进去，才可以在代码中设置路径进行访问_unity基本概念
在gitlab中指定自定义 CI/CD 配置文件_gitlab配置cicd-程序员宅基地
文章浏览阅读2.4k次。指定自定义 CI/CD 配置文件，顾名思义就是在项目中指定文件来代替默认的.gitlab-ci.yml文件的方式来运行流水线。以往我们在使用流水线的时候，都是默认将.gitlab-ci.yml文件存在在项目的跟路径下，但是我们也可以指定备用文件名路径，或者不想在每个项目中来维护这个yml文件，那么通过自定义 CI/CD 配置文件便可以实现。_gitlab配置cicd
mysql出现#1063 - Incorrect column specifier for column 'id'的解决方法_sql 错误 [1063] [42000]: incorrect column specifier -程序员宅基地
文章浏览阅读1w次。出现这个表示如果设置了自动增长，字段类型应该设置为int整型。_sql 错误 [1063] [42000]: incorrect column specifier for column 'id' incorrec
java getlength_JAVA RSA-DerInputStream.getLength(): lengthTag=127, too big.-程序员宅基地
文章浏览阅读1k次。RSA 加载公钥时： Caused by: java.security.InvalidKeyException: IOException: DerInputStream.getLength(): lengthTag=127, too big.加载公钥代码段：public static String getPubKeyByCer(String cerPath){String pubKey = "";..._java.security.invalidkeyexception: ioexception : derinputstream.getlength():
鸿蒙HarmonyOS从零实现类微信app效果第一篇，基础界面搭建_安卓开发鸿蒙写的优美界面-程序员宅基地
文章浏览阅读794次。最近鸿蒙HarmonyOS开发相关的消息非常的火，传言华为系手机后续将不再支持原生Android应用，所以对于原Android应用开发对应的Harmony版本也被一系列大厂提上了日程。作为一个名义上的移动端开发工程师（(⊙o⊙)…，最近写python多过Android），当人不让要来学习一波。本次的学习计划是实现一个类微信app效果，计划将常规的app效果都实现一下，以便后续如果需要写Harmony应用，可以直接上手。由于我本人有多年的开发经验和多种语言的开发经验，对于Javascript和。_安卓开发鸿蒙写的优美界面