他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)javascript的setTimeout()用法总结，js的setTimeout()方法
141746次浏览
js的setTimeout方法用处比较多，通常用在页面刷新了、延迟执行了等等。但是很多javascript新手对setTimeout的用法还是不是很了解。虽然我学习和应用javascript已经两年多了，但是对setTimeout方法，有时候也要查阅资料。今天对js的setTimeout方法做一个系统地总结。
setInterval与setTimeout的区别
说道setTimeout，很容易就会想到setInterval，因为这两个用法差不多，但是又有区别，今天一起总结了吧！
setTimeout
定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。　　
语法: setTimeout(code,millisec) 　
参数： code （必需）：要调用的函数后要执行的 JavaScript 代码串。millisec（必需）：在执行代码前需等待的毫秒数。
提示： setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
setInterval
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
setInterval(code,millisec[,&lang&])
code 必需。要调用的函数或要执行的代码串。millisec
必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
通过上面可以看出，setTimeout和setinterval的最主要区别是：
setTimeout只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即结束。如果运行的代码中再次运行同样的setTimeout命令，则可循环运行。（即 要循环运行，需函数自身再次调用 setTimeout()）
而 setinterval是循环运行的，即每到设定时间间隔就触发指定代码。这是真正的定时器。
setinterval使用简单，而setTimeout则比较灵活，可以随时退出循环，而且可以设置为按不固定的时间间隔来运行，比如第一次1秒，第二次2秒，第三次3秒。
我个人而言，更喜欢用setTimeout多一些！
setTimeout的用法
让我们一起来运行一个案例，首先打开记事本，将下面代码贴入，运行一下效果！
&!DOCTYPE html&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&h1& &font color=blue& haorooms博客示范网页 &/font& &/h1&
&p& 请等三秒!&/p&
setTimeout(&alert('对不起, haorooms博客要你等候多时')&, 3000 )
页面会在停留三秒之后弹出对画框！这个案例应用了setTimeout最基本的语法，setTimeout不会自动重复执行！
setTimeout也可以执行function，还可以不断重复执行！我们再来一起做一个案例：
&!DOCTYPE html&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
function countSecond()
　 document.haorooms.haoroomsinput.value=x
　 setTimeout(&countSecond()&, 1000)
&form name=&haorooms&&
&input type=&text& name=&haoroomsinput&value=&0& size=4 &
countSecond()
&/body& &/html&
你可以看到input文本框中的数字在一秒一秒的递增！所以，setTimeout也可以制作网页中的时间跳动！
没有案例，学习起来不会很快，我们再来一起做一个例子，计算你在haorooms某个页面的停留时间：
&!DOCTYPE html&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
function countMin()
　 document.displayMin.displayBox.value=y
　 setTimeout(&countMin()&,60000)
function countSec()
{　x = x + 1
　 z =x % 60
　 document.displaySec.displayBox.value=z
　 setTimeout(&countSec()&, 1000)
&/script& &/head&
&table& &tr valign=top& &td& 你在haorooms博客中的停留时间是: &/td&
&form name=displayMin&
&input type=text name=displayBox value=0 size=4 &
&td& 分 &/td&
&form name=displaySec& &/td&
&td& &input type=text name=displayBox value=0 size=4 &
&td& 秒。&/td& &/tr&
countMin()
countSec()
怎么样，通过上面的例子，对setTimeout（）的用法，相信你都了解了吧！
clearTimeout( )
我们再来一起看一下 clearTimeout( )，
clearTimout( ) 有以下语法 : 　
clearTimeout(timeoutID)
要使用 clearTimeout( ), 我们设定 setTimeout( ) 时 , 要给予这 setTimout( ) 一个名称 , 这名称就是 timeoutID , 我们叫停时 , 就是用这 timeoutID 来叫停 , 这是一个自定义名称 , 但很多人就以 timeoutID 为名。
在下面的例子 , 设定两个 timeoutID, 分别命名为 meter1 及 meter2, 如下 :
meter1 = setTimeout(“count1( )”, 1000)
meter2 = setTimeout(“count2( )”, 1000)
使用这 meter1 及 meter2 这些 timeoutID 名称 , 在设定 clearTimeout( ) 时 , 就可指定对哪一个 setTimeout( ) 有效 , 不会扰及另一个 setTimeout( ) 的操作。
下面请看 clearTimeout()的案例
&!DOCTYPE html&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
function count1()
{　x = x + 1
　 document.display1.box1.value = x
　 meter1=setTimeout(&count1()&, 1000)
function count2()
{　y = y + 1
　 document.display2.box2.value = y
　 meter2=setTimeout(&count2()&, 1000)
&/script& &/head&
&form name=&display1&&
&input type=&text& name=&box1& value=&0& size=4 &
&input type=button value=&停止计时& onClick=&clearTimeout(meter1) & &
&input type=button value=&继续计时& onClick=&count1() & &
&form name=&display2&&
&input type=&text& name=&box2& value=&0& size=4 &
&input type=button value=&停止计时& onClick=&clearTimeout(meter2) & &
&input type=button value=&继续计时& onClick=&count2() & &
通过上面的讲解，不知道您对setTimeout了解了没有，下次使用setTimeout会不会很熟练？会不会再把setTimeout和setInterval搞混了？要是您有什么不了解的地方，可以相互交流，共同提高，谢谢！
相关文章：
关键词搜索Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
转载 & & 作者：
最近在做项目时用到了定时执行的js方法，setInterval与setTimeout时间长了不用有些生疏了，所以自己总结了一下，记下来，以便以后使用。
Document自带的方法： 循环执行：var timeid = window.setInterval（“方法名或方法”，“延时”）;window.clearInterval(timeid); 定时执行：var tmid = window.setTimeout(“方法名或方法”, “延时”);window.clearTimeout(tmid); 举例说明： A.当要执行的方法中不需要参数时
代码如下: &script type=”text/javascript”& //循环执行，每隔3秒钟执行一次showalert（） window.setInterval(showalert, 3000); function showalert() { alert(“aaaaa”); } //定时执行，5秒后执行show() window.setTimeout(show,5000); function show() { alert(“bbb”); } &/script&
B.当要执行的方法中需要参数时
代码如下: &script type=”text/javascript”& //循环执行，每隔3秒钟执行一次 showalert（） window.setInterval(function(){ showalert(“aaaaa”); }, 3000); function showalert(mess) { alert(mess); } //定时执 行，5秒后执行showalert() window.setTimeout(function(){ showalert(“bbbbbb”); },5000); &/script&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具JavaScript同步、异步、回调执行顺序之经典闭包setTimeout面试题分析 - WEB前端 - 伯乐在线
& JavaScript同步、异步、回调执行顺序之经典闭包setTimeout面试题分析
同步、异步、回调？傻傻分不清楚。
大家注意了，教大家一道口诀：
同步优先、异步靠边、回调垫底（读起来不顺）
用公式表达就是：
同步 =& 异步 =& 回调
这口诀有什么用呢？用来对付面试的。
有一道经典的面试题：
JavaScript
for (var i = 0; i & 5; i++) {
setTimeout(function() {
console.log('i: ',i);
console.log(i);
123456789101112131415
for (var i = 0; i & 5; i++) {&&&&setTimeout(function() {&&&&&&&&console.log('i: ',i);&&&&}, 1000);}&console.log(i);&//输出5i:&&5i:&&5i:&&5i:&&5i:&&5
这道题目大家都遇到过了吧，那么为什么会输出这个呢？记住我们的口诀 同步 =& 异步 =& 回调
1、for循环和循环体外部的console是同步的，所以先执行for循环，再执行外部的console.log。（同步优先）
2、for循环里面有一个setTimeout回调，他是垫底的存在，只能最后执行。（回调垫底）
那么，为什么我们最先输出的是5呢？
非常好理解，for循环先执行，但是不会给setTimeout传参（回调垫底），等for循环执行完，就会给setTimeout传参，而外部的console打印出5是因为for循环执行完成了。
知乎有大神讲解过
，就是以这个例子为开头的。但是没有说为什么setTimeout是输出5个5。
这里涉及到JavaScript执行栈和消息队列的概念，概念的详细解释可以看阮老师的 ，或者看
《图片来自于MDN官方》
我拿这个例子做一下讲解，JavaScript单线程如何处理回调呢？JavaScript同步的代码是在堆栈中顺序执行的，而setTimeout回调会先放到消息队列，for循环每执行一次，就会放一个setTimeout到消息队列排队等候，当同步的代码执行完了，再去调用消息队列的回调方法。
在这个经典例子中，也就是说，先执行for循环，按顺序放了5个setTimeout回调到消息队列，然后for循环结束，下面还有一个同步的console，执行完console之后，堆栈中已经没有同步的代码了，就去消息队列找，发现找到了5个setTimeout，注意setTimeout是有顺序的。
那么，setTimeout既然在最后才执行，那么他输出的i又是什么呢？答案就是5。。有人说不是废话吗？
现在告诉大家为什么setTimeout全都是5，JavaScript在把setTimeout放到消息队列的过程中，循环的i是不会及时保存进去的，相当于你写了一个异步的方法，但是ajax的结果还没返回，只能等到返回之后才能传参到异步函数中。
在这里也是一样，for循环结束之后，因为i是用var定义的，所以var是全局变量（这里没有函数，如果有就是函数内部的变量），这个时候的i是5，从外部的console输出结果就可以知道。那么当执行setTimeout的时候，由于全局变量的i已经是5了，所以传入setTimeout中的每个参数都是5。很多人都会以为setTimeout里面的i是for循环过程中的i，这种理解是不对的。
===========================================分割线=========================================
看了上面的解释，你是不是有点头晕，没事，继续深入讲解。
我们给第一个例子加一行代码。
JavaScript
for (var i = 0; i & 5; ++i) {
setTimeout(function() {
console.log('2: ',i);
console.log('1: ', i); //新加一行代码
console.log(i);
123456789101112131415161718192021
for (var i = 0; i & 5; ++i) {&&&&setTimeout(function() {&&&&&&&&console.log('2: ',i);&&&&}, 1000);&&&&console.log('1: ', i); //新加一行代码}&console.log(i);&//输出1:&&01:&&11:&&21:&&31:&&452:&&52:&&52:&&52:&&52:&&5
来，大家再跟着我一起念一遍：同步 =& 异步 =& 回调 （强化记忆）
这个例子可以很清楚的看到先执行for循环，for循环里面的console是同步的，所以先输出，for循环结束后，执行外部的console输出5，最后再执行setTimeout回调 55555。。。
=====================================分割线============================================
这么简单，不够带劲是不是，那么面试官会问，怎么解决这个问题？
最简单的当然是let语法啦。。
JavaScript
for (let i = 0; i & 5; ++i) {
setTimeout(function() {
console.log('2: ',i);
console.log(i);
i is not defined
123456789101112131415
for (let i = 0; i & 5; ++i) {&&&&setTimeout(function() {&&&&&&&&console.log('2: ',i);&&&&}, 1000);}&console.log(i);&//输出i is not defined2:&&02:&&12:&&22:&&32:&&4
咦，有同学问，为什么外部的i报错了呢？
又有同学问，你这个口诀在这里好像不适应啊？
let是ES6语法，ES5中的变量作用域是函数，而let语法的作用域是当前块，在这里就是for循环体。在这里，let本质上就是形成了一个闭包。也就是下面这种写法一样的意思。如果面试官对你说用下面的这种方式，还有let的方式，你可以严肃的告诉他：这就是一个意思！这也就是为什么有人说let是语法糖。
JavaScript
var loop = function (_i) {
setTimeout(function() {
console.log('2：', _i);
for (var _i = 0; _i & 5; _i++) {
console.log(i);
1234567891011
var loop = function (_i) {&&&&setTimeout(function() {&&&&&&&&console.log('2：', _i);&&&&}, 1000);};&for (var _i = 0; _i & 5; _i++) {&&&&loop(_i);}&console.log(i);
面试官总说闭包、闭包、闭包，什么是闭包？后面再讲。
写成ES5的形式，你是不是发现就适合我说的口诀了？而用let的时候，你发现看不懂？那是因为你没有真正了解ES6的语法原理。
我们来分析一下，用了let作为变量i的定义之后，for循环每执行一次，都会先给setTimeout传参，准确的说是给loop传参，loop形成了一个闭包，这样就执行了5个loop，每个loop传的参数分别是0，1，2，3，4，然后loop里面的setTimeout会进入消息队列排队等候。当外部的console执行完毕，因为for循环里的i变成了一个新的变量 _i ，所以在外部的console.log(i)是不存在的。
现在可以解释闭包的概念了：当内部函数以某一种方式被任何一个外部函数作用域访问时，一个闭包就产生了。
我知道你又要我解释这句话了，loop(_i)是外部函数，setTimeout是内部函数，当setTimeout被loop的变量访问的时候，就形成了一个闭包。（别说你又晕了😓）
随便举个新的例子。
JavaScript
function t() {
var a = 10;
var b = function() {
console.log(a);
t(); //输出 10
function t() {&&&&var a = 10;&&&&var b = function() {&&&&&&&&console.log(a);&&&&&&&&}&&&&b();}t(); //输出 10
跟我一起念口诀：同步 =& 异步 =& 回调 （强化记忆）
先执行函数t，然后js就进入了t内部，定义了一个变量，然后执行函数b，进入b内部，然后打印a，这里都是同步的代码，没什么异议，那么这里怎么解释闭包：函数t是外部函数，函数b是内部函数，当函数b被函数t的变量访问的时候，就形成了闭包。
========================================分割线==============================================
上面主要讲了同步和回调执行顺序的问题，接着我就举一个包含同步、异步、回调的例子。
JavaScript
let a = new Promise(
function(resolve, reject) {
console.log(1)
setTimeout(() =& console.log(2), 0)
console.log(3)
console.log(4)
resolve(true)
a.then(v =& {
console.log(8)
let b = new Promise(
function() {
console.log(5)
setTimeout(() =& console.log(6), 0)
console.log(7)
123456789101112131415161718192021
let a = new Promise(&&function(resolve, reject) {&&&&console.log(1)&&&&setTimeout(() =& console.log(2), 0)&&&&console.log(3)&&&&console.log(4)&&&&resolve(true)&&})a.then(v =& {&&console.log(8)})&let b = new Promise(&&function() {&&&&console.log(5)&&&&setTimeout(() =& console.log(6), 0)&&})&console.log(7)
看到这个例子，千万不要害怕😨，先读一遍口诀：同步 =& 异步 =& 回调 （强化记忆）
1、看同步代码：a变量是一个Promise，我们知道Promise是异步的，是指他的then()和catch()方法，Promise本身还是同步的，所以这里先执行a变量内部的Promise同步代码。（同步优先）
JavaScript
console.log(1)
setTimeout(() =& console.log(2), 0) //回调
console.log(3)
console.log(4)
console.log(1)setTimeout(() =& console.log(2), 0) //回调console.log(3)console.log(4)
2、Promise内部有4个console，第二个是一个setTimeout回调（回调垫底）。所以这里先输出1，3，4回调的方法丢到消息队列中排队等着。
3、接着执行resolve(true)，进入then()，then是异步，下面还有同步没执行完呢，所以then也滚去消息队列排队等候。（真可怜）（异步靠边）
4、b变量也是一个Promise，和a一样，执行内部的同步代码，输出5，setTimeout滚去消息队列排队等候。
5、最下面同步输出7。
6、同步的代码执行完了，JavaScript就跑去消息队列呼叫异步的代码：异步，出来执行了。这里只有一个异步then，所以输出8。
7、异步也over，轮到回调的孩子们：回调，出来执行了。这里有2个回调在排队，他们的时间都设置为0，所以不受时间影响，只跟排队先后顺序有关。则先输出a里面的回调2，最后输出b里面的回调6。
8、最终输出结果就是：1、3、4、5、7、8、2、6。
我们还可以稍微做一点修改，把a里面Promise的 setTimeout(() =& console.log(2), 0)改成 setTimeout(() =& console.log(2), 2)，对，时间改成了2ms，为什么不改成1试试呢？1ms的话，浏览器都还没有反应过来呢。你改成大于或等于2的数字就能看到2个setTimeout的输出顺序发生了变化。所以回调函数正常情况下是在消息队列顺序执行的，但是使用setTimeout的时候，还需要注意时间的大小也会改变它的顺序。
====================================分割线==================================================
口诀不一定是万能的，只能作为一个辅助，更重要的还是要理解JavaScript的运行机制，才能对代码执行顺序有清晰的路线。
还有async/await等其他异步的方案，不管是哪种异步，基本都适用这个口诀，对于新手来说，可以快速读懂面试官出的js笔试题目。以后再也不用害怕做笔试题啦。
特殊情况下不适应口诀的也很正常，JavaScript博大精深，不是一句话就能概括出来的。
最后，在跟着我念一遍口诀：同步 =& 异步 =& 回调
可能感兴趣的话题
不错，理解又加深了
关于伯乐前端
伯乐前端分享Web前端开发，包括JavaScript，CSS和HTML5开发技术，前端相关的行业动态。
新浪微博：
推荐微信号
（加好友请注明来意）
– 好的话题、有启发的回复、值得信赖的圈子
– 分享和发现有价值的内容与观点
– 为IT单身男女服务的征婚传播平台
– 优秀的工具资源导航
– 翻译传播优秀的外文文章
– 国内外的精选文章
– UI,网页，交互和用户体验
– 专注iOS技术分享
– 专注Android技术分享
– JavaScript, HTML5, CSS
– 专注Java技术分享
– 专注Python技术分享
& 2018 伯乐在线