JavaScript中setTimeout的那些事儿

2024-11-28 22:55:18

一、setTimeout那些事儿之单线程

一直以来，大家都在说Javascript是单线程，浏览器无论在什么时候，都且只有一个线程在运行JavaScript程序。

但是，不知道大家有疑问没——就是我们在编程过程中的setTimeout(类似的还有setInterval、Ajax)，不是异步执行的吗？！！

例如：

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   console.log("a");
   //利用setTimeout延迟执行匿名函数
   setTimeout(function(){
    console.log("b");
   },100);
   console.log("c");
  </script>
 </body>
</html>

运行代码，打开chrome调试器，得如下结果

这个结果很容易理解，因为我setTimeout里的内容是在100ms后执行的嘛，当然是先输出a，再输出c，100ms后再输出setTimeout里的b嘛。

咦，那Javascript这不就不是单线程了嘛，这不就可以实现多线程了？！！

其实，不是的。setTimeout没有打破JavaScript的单线程机制，它其实还是单线程。

为什么这么说呢，那就得理解setTimeout到底是个怎么回事。

请看下面的代码，猜结果:

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   var date = new Date();
   //打印才进入时的时间
   console.log('first time: ' + date.getTime());
   //一秒后打印setTimeout里匿名函数的时间
   setTimeout(function(){
    var date1 = new Date();
    console.log('second time: ' + date1.getTime() );
    console.log( date1.getTime() - date.getTime() );
   },1000);
   //重复操作
   for(var i=0; i < 10000 ; i++){
    console.log(1);
   }
  </script>
 </body>
</html>

看了上面的代码，猜猜输出的结果是多少呢？1000毫秒？

我们打开chrome调试器，见下图

纳尼，怎么不是1000毫秒呢？！！！

我们再看看下面的代码：

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   //一秒后执行setTimeout里的匿名函数，alert下
   setTimeout(function(){
    alert("monkey");
   },1000);
   while(true){};
  </script>
 </body>
</html>

运行代码后！

怎么一直刷新，浏览器卡死了呢，并且没有alert！！

按道理，即使我while无限循环，在1秒后也得alert一下啊。

种种问题皆一个原因，JavaScript是单线程 。

要记住JavaScript是单线程，setTimeout没有实现多线程，它背后的真相是这样滴：

JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序。

浏览器的内核是多线程的，它们在内核控制下相互配合以保持同步，一个浏览器至少实现三个常驻线程：JavaScript引擎线程，GUI渲染线程，浏览器事件触发线程。

*JavaScript引擎是基于事件驱动单线程执行的，JavaScript引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JavaScript线程在运行JavaScript程序。

*GUI渲染线程负责渲染浏览器界面，当界面需要重绘（Repaint）或由于某种操作引发回流(Reflow)时,该线程就会执行。但需要注意，GUI渲染线程与JavaScript引擎是互斥的，当JavaScript引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JavaScript引擎空闲时立即被执行。

*事件触发线程，当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JavaScript引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeout、也可来自浏览器内核的其他线程如鼠标点击、Ajax异步请求等，但由于JavaScript的单线程关系所有这些事件都得排队等待JavaScript引擎处理（当线程中没有执行任何同步代码的前提下才会执行异步代码）。

so,通过以上讲解，以上种种问题迎刃而解。

二、setTimeout那些事儿之延迟时间为0

当setTimeout的延迟时间为0时，大家想想它会怎么执行呢？

例如下面的代码：

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   console.log('a');
   setTimeout(function(){
    console.log('b');
   },0);
   console.log('c');
   console.log('d');
  </script>
 </body>
</html>

运行代码结果如下：

假设你已经知道Javascript单线程的运行原理了。那么，可能会有这样的疑问：setTimeout的时间为0，都没加到处理队列的末尾，怎么会晚执行呢？不应该立即执行吗？

我的理解是，就算setTimeout的时间为0，但是它仍然是setTimeout啊，原理是不变的。所以会将其加入到队列末尾，0秒后执行。

况且，经过查找资料发现，setTimeout有一个最小执行时间，当指定的时间小于该时间时，浏览器会用最小允许的时间作为setTimeout的时间间隔，也就是说即使我们把setTimeout的毫秒数设置为0，被调用的程序也没有马上启动。

这个最小的时间间隔是多少呢？

这和浏览器及操作系统有关。在John Resig的《Javascript忍者的秘密》一书中提到–Browsers all have a 10ms minimum delay on OSX and a(approximately) 15ms delay on Windows.（在苹果机上的最小时间间隔是10毫秒，在Windows系统上的最小时间间隔大约是15毫秒），另外，MDC中关于setTimeout的介绍中也提到，Firefox中定义的最小时间间隔（DOM_MIN_TIMEOUT_VALUE）是10毫秒，HTML5定义的最小时间间隔是4毫秒。

说了这么多，setTimeout的延迟时间为0，看来没什么意义嘛，都是放在队列后执行嘛。

非也，天生我材必有用，就看你怎么用咯。抛砖迎玉下。

1、可以用setTimeout的延迟时间为0，模拟动画效果哦。

详情请见下代码：

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <div id="container" style="width:100px;height:100px;border:1px solid black;"></div>
  <div id="btn" style="width:40px;height:40px;line-height:40px;margin-top:20px;background:pink;">click</div>
  <script>
   window.onload = function(){
    var con = document.getElementById('container');
    var btn = document.getElementById('btn');
    //Params: i 为起始高度，num为预期高度
    function render(i, num) {
     i++;
     con.style.height = i + 'px';
     //亮点在此
     if(i < num){
      setTimeout(function() {
       render(i, num);
      },0);
     }
     else {
      con = null;
      btn = null;
     }
    };
    btn.onclick = function(){
     render(100, 200);
    };
   };
  </script>
 </body>
</html>

由于是动画，所以想看其效果，还请各位看官运行下代码哦。

代码第19行中，利用setTimeout，在每一次render执行完成（给高度递增1）后，由于Javascript是单线程，且setTimeout里的匿名函数会在render执行完成后，再执行render。所以可以实现动画效果。

2、可以用setTimeout的延迟时间为0，实现捕获事件哦。

当我们点击子元素时，我们可以利用setTimeout的特性，来模拟捕获事件。

请见如下代码：

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style>
   #parent {
    width:100px;
    height:100px;
    border:1px solid black;
   }
   #child {
    width:50px;
    height:50px;
    background:pink;
   }
  </style>
 </head>
 <body>
  <div id="parent">
   <div id="child"></div>
  </div>
  <script>
   //点击子元素，实现子元素的事件在父元素触发后触发
   window.onload = function(){
    var parent = document.getElementById('parent');
    var child = document.getElementById('child');
    parent.onclick = function(){
     console.log('parent');
    }
    child.onclick = function(){
     //利用setTimeout，冒泡结束后，最后输出child
     setTimeout(function(){
      console.log('child');
     },0);
    }
    parent = null;
    child = null;
   }
  </script>
 </body>
</html>

执行代码，点击粉红色方块，输出结果：

三、setTimeout那些事儿之this

说到this，对于它的理解就是：this是指向函数执行时的当前对象，倘若没有明确的当前对象，它就是指向window的。

好了，那么我们来看看下面这段代码：

 <!DOCTYPE html>
 <head>
  <title>setTimeout</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 </head>
 <body>
  <script>
   var name = '!!';
   var obj = {
    name:'monkey',
    print:function(){
     console.log(this.name);
    },
    test:function(){
     //this.print
     setTimeout(this.print,1000);
    }
   }
   obj.test();
  </script>
 </body>
</html>

通过chrome调试器，查看输出结果：

咦，它怎么输出的是”!!”呢？不应该是obj里的”monkey”吗？！！

这是因为setTimeout中所执行函数中的this，永远指向window。

不对吧，那上面代码中的setTimeout(this.print,1000)里的this.print怎么指向的是obj呢？！！

注意哦，我这里说的是“延迟执行函数中的this”，而不是setTimeout调用环境下的this。

什么意思？

setTimeout(this.print,1000)，这里的this.print中的this就是调用环境下的；

而this.print=function(){console.log(this.name);}，这个匿名函数就是setTimeout延迟执行函数，其中的this.name也就是延迟执行函数中的this啦。

嘿嘿，这下明白了吧。

 var age = 24;
function Fn(){
 this.age = 18;
 setTimeout(function(){
  //this代表window
  console.log(this);
  //输出24，而不是Fn的18
  console.log(this.age);
 },1000);
}
new Fn();

咦，那有个疑问，比如我想在setTimeout延迟执行函数中的this指向调用的函数呢，而不是window？！！我们该怎么办呢。

常用的方法就是利用that。

that？

对，that。利用闭包的知识，让that保证你传进去的this，是你想要的。

详情见下:

 var age = 24;
function Fn(){
 //that在此
 var that = this;
 this.age = 18;
 setTimeout(function(){
  console.log(that);
  console.log(that.age);
 },1000);
}
new Fn();

还有一种方法就是，利用bind。

如下:

 var age = 24;
function Fn(){
 this.age = 18;
 //bind传入this
 setTimeout(function(){
  console.log(this);
  console.log(this.age);
 }.bind(this),1000);
}
new Fn();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

Document自带的方法: 循环执行:var timeid = window.setInterval("方法名或方法","延时");window.clearInterval(timeid); 定时执行:var tmid = window.setTimeout("方法名或方法", "延时");window.clearTimeout(tmid); 举例说明: A.当要执行的方法中不需要参数时复制代码代码如下: <scr
javascript中SetInterval与setTimeout的定时器用法

示例一: 查看演示下载源码 setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则是在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除.也就是说setTimeout()只执行一次,setInterval()可以执行多次.两个函数的参数也相同,第一个参数是要执行的code或句柄,第二个是延迟的毫秒数. setTimeOut用法 setTimeout函数的用法如下: var timeoutID = window.setTi
JS中setTimeout()的用法详解

setTimeout setTimeout 语法例子用 setTimeout 来执行 function 不断重复执行的 setTimeout 设定条件使 setTimeout 停止计分及计秒的 counter clearTimeout Set flag 1. SetTimeOut() 1.1 SetTimeOut()语法例子 1.2 用SetTimeOut()执行Function 1.3 SetTimeOut()语法例子 1.4 设定条件使SetTimeOut()停止 1.5 计分及秒的co
js中setTimeout的妙用--防止循环超时

上个周日,介绍了如何使用setTimeout代替setInterval进行间歇调用,这个周日,继续来讲<JavaScript高级程序设计>这本书里面,对于setTimeout的另一种妙用--防止循环超时 [这是铺垫,为故事的高潮埋下伏笔] JS是单线程的,一个代码块里面的代码,只能按顺序从上到下执行,所以如果中间有一块代码,执行起来非常耗时,就会导致下面的代码无法执行,出现浏览器假死的状态. JS的耗时操作,常见的有两种 1.向服务器发起请求 2.对数组的循环操作 (当然,还有一种,
JavaScript window.setTimeout() 的详细用法

js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.但是很多javascript新手对setTimeout的用法还是不是很了解.虽然我学习和应用javascript已经两年多了,但是对setTimeout方法,有时候也要查阅资料.今天对js的setTimeout方法做一个系统地总结. setInterval与setTimeout的区别说道setTimeout,很容易就会想到setInterval,因为这两个用法差不多,但是又有区别,今天一起总结了吧! setTimeo
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)

废话不多说了,直接给大家贴代码了. // 每隔五秒定时刷新当前窗口 setTimeout("self.location.reload();",5000); //js 定时关闭窗口(ie和FF中测试过) //6秒后自动关闭当前窗口 setTimeout("window.opener=null;window.close()",6000); 下面给大家介绍下javascript定时器使用使用定时器实现JavaScript的延期执行或重复执行 window对象提供了两个方
快速掌握Node.js中setTimeout和setInterval的使用方法

Node.js和js一样也有计时器,超时计时器.间隔计时器.及时计时器,它们以及process.nextTick(callback)函数来实现事件调度.今天先学下setTimeout和setInterval的使用. 一.setTimeout超时计时器(和GCD中的after类似) 在node.js中可以使用node.js内置的setTimeout(callback,delayMillSeconds,[args])方法.当调用setTime()时回调函数会在delayMillSeconds后执行
JS延迟加载(setTimeout) JS最后加载

第一 JS延迟加载复制代码代码如下: <script language="JavaScript" src="" id="my"></script> <script> setTimeout("document.getElementById('my').src='include/common.php'; ",3000);//延时3秒 </script> 一般情况下都是利用setT
JavaScript中SetInterval与setTimeout的用法详解

setTimeout 描述 setTimeout(code,millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 注:调用过程中,可以使用clearTimeout(id_of_settimeout)终止参数描述 code 必需,要调用的函数后要执行的 JavaScript 代码串. millisec 必需,在执行代码前需等待的毫秒数. setTimeinterval setInterval(code,millisec[,"lang"]) 参数
js函数setTimeout延迟执行的简单介绍

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: code (必需):要调用的函数后要执行的 JavaScript 代码串. millisec(必需):在执行代码前需等待的毫秒数. 提示: setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout().实例: 复制代码代码如下: function timed

JavaScript中setTimeout的那些事儿

相关推荐

随机推荐