从setTimeout看js函数执行过程

老实说,写这篇文章的时候心里是有点压抑的,因为受到打击了,为什么?就 因为喜欢折腾不小心看到了这个"简单"的函数:

for (var i = 0; i < 5; i++) {
      setTimeout(function () {
        console.log(i)
      }, i * 1000);
    }
    console.log(i);

什么?这不就是我很久之前看到的先打印一个5,再打印一个5,之后每隔一秒就打印一个5,直到打印完6个5的实现方法吗?那么问题来了,如果我要依次打印0,1,2,3,4,5的话我该怎么办,其实在这之前我就知道有这两个方法:一个是这样:

function log(i){
setTimeout(function(){
console.log(i)
},i*1000)
};
for (var i = 0; i < 5; i++) {
      log(i) ;
    }
    console.log(i);

还有一个是这样:

for(var i=0;i<5;i++){
(function(e){
setTimeout(function(){
console.log(e)
},i*1000);
})(i);
};
console.log(i);

不怕笑话,在这之前我是没搞懂这两个函数真正意义上的作用是用来干嘛的,只强迫自己这样记住这样修改就可以了,但是现在不行啊,我有强迫症啊!于是,我慢慢分析了一下,发现上面那段代码可以分离成这样:

i=0时;满足条件;

setTimeout(function(){
console.log(i)
},0*1000);

i=1时;满足条件;

setTimeout(function(){
console.log(i)
},1*1000);

i=2时;满足条件;

setTimeout(function(){
console.log(i)
},2*1000);

i=3时;满足条件;

setTimeout(function(){
console.log(i)
},3*1000);

i=4时;满足条件;

setTimeout(function(){
console.log(i)
},4*1000);

i=5时,不满足条件,跳出循环,接着执行for循环后面的console.log(i),打印5;最后依次每秒打印5;

真有意思,为什么setTimeout里面的console.log会是后于for循环外面的console.log执行呢?直到我认识到了这个单词=>"队列", 队列又有宏任务队列(Macro Task)以及微任务队列(Micro Task)之分 ,在javascript中:

macro-task包括:script(整体代码), setTimeout , setInterval, setImmediate, I/O, UI rendering。

micro-task包括:process.nextTick, Promises , Object.observe, MutationObserver

上面函数的setTimeout就属于宏任务

在js中,事件循环的顺序是从script开始第一次循环,随后全局上下文进入函数调用栈,碰到macro-task就将其交给处理它的模块处理完之后将回调函数放进macro-task的队列之中,碰到micro-task也是将其回调函数放进micro-task的队列之中。直到函数调用栈清空只剩全局执行上下文,然后开始执行所有的micro-task。 当所有可执行的micro-task执行完毕之后。循环再次执行macro-task中的一个任务队列 ,执行完之后再执行所有的micro-task,就这样一直循环。

这就是为什么setTimeout里面的console.log会是后于for循环外面的console.log执行,在函数执行上下文中,seiTimeout函数会被放到处理他的macro-task的队列之中,所以循环的时候setTimeout里面的function是不会被执行的,而是等到所有整体代码(非队列)跑完之后才会执行队列中的函数;写到这里,可能会有点懵逼,其实我也有点懵逼,哈哈哈!!

为了加深理解,还可以试试在里面加入Promise,于是就有了这个:

(function copy() {
  setTimeout(function() {console.log(4)}, 0);
  new Promise(function executor(resolve) {
    console.log(1);
    for( var i=0 ; i<10000 ; i++ ) {
      i == 9999 && resolve();
    }
    console.log(2);
  }).then(function() {
    console.log(5);
  });
  console.log(3);
})()

解释一下=>

1.首先,script任务源先执行,全局上下文入栈。

2.script任务源的代码在执行时遇到setTimeout,作为一个macro-task,将其回调函数放入自己的队列之中。

3.script任务源的代码在执行时遇到Promise实例。Promise构造函数中的第一个参数是在当前任务直接执行不会被放入队列之中,因此此时输出 1 。

4.在for循环里面遇到resolve函数,函数入栈执行之后出栈,此时Promise的状态变成Fulfilled。代码接着执行遇到console.log(2),输出2。

5.接着执行,代码遇到then方法,其回调函数作为micro-task入栈,进入Promise的任务队列之中,此时Promise的then 里面的function回调函数跟setTimeout里面的function回调函数有着异曲同工之意,都会被放到各自的任务队列中,

 直到函数上下文即script中所有的非队列代码执行完毕后再执行,而且微任务队列优先于宏任务队列被处理,

总体顺序为:上下文非队列代码>微任务队列回调函数代码>宏任务队列回调函数代码

6.代码接着执行,此时遇到console.log(3),输出3。

7.输出3之后第一个宏任务script的代码执行完毕,这时候开始开始执行所有在队列之中的micro-task。then的回调函数入栈执行完毕之后出栈,这时候输出5

8.这时候所有的micro-task执行完毕,第一轮循环结束。第二轮循环从setTimeout的任务队列开始,setTimeout的回调函数入栈执行完毕之后出栈,此时输出4。

最后,为了加深理解,再上一段代码:

console.log('golb1');
setTimeout(function() {
  console.log('timeout1');
  new Promise(function(resolve) {
    console.log('timeout1_promise');
    resolve();
    setTimeout(function(){
      console.log('time_timeout')
    });  
  }).then(function() {
    console.log('timeout1_then')
  })
  setTimeout(function() {
   console.log('timeout1_timeout1');
  });
})
new Promise(function(resolve) {
  console.log('glob1_promise');
  resolve();
  setTimeout(function(){
     console.log('prp_timeout')
    });
}).then(function() { console.log('glob1_then') })

如果你的执行结果是:golb1=>glob1_promise=>glob1_then=>timeout1=>timeout1_promise=>timeout1_then=>prp_timeout=>time_timeout=>timeout1_timeout1,

可能异步队列算是入门了吧!~~上面的代码看起来有点杂乱,可能用asyns搭配await改造一下会更好,但是这或多或少是鄙人从setTimeout中得到的见解吧

总结

以上所述是小编给大家介绍的从setTimeout看js函数执行过程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • javascript 终止函数执行操作

    1.如果终止一个函数的用return即可,实例如下:function testA(){    alert('a');    alert('b');    alert('c');}testA(); 程序执行会依次弹出'a','b','c'. function testA(){    alert('a');    return;    alert('b');    alert('c');}testA(); 程序执行弹出'a'便会终止. 2.在函数中调用别的函数,在被调用函数终止的同时也希望调用的函数

  • js下将字符串当函数执行的方法

    复制代码 代码如下: //测试函数 function test(str){ alert(str); } // 方法一 window["test"]("方法一"); // 方法二 eval('test("方法二")');

  • JavaScript计时器用法分析【setTimeout和clearTimeout】

    本文实例分析了JavaScript计时器用法.分享给大家供大家参考,具体如下: JavaScript中使用setTimeout和clearTimeout函数进行计时/停止计时的操作. 1.指定时间后执行一个动作,如3s后弹出一个对话框: setTimeout('alert("3s")',5000); 并且,该函数可以叠加起来是用,如: function delay_times(){ setTimeout('document.getElementById("time_text&

  • JavaScript中setTimeout和setInterval函数的传参及调用

    如何向 setTimeout . setInterval 传递参数 看如下代码: var str = 'aaa'; var num = 2; function auto(num){ alert(num); } setTimeout('auto(num)',4000); 这样写是可以正常工作的,但是如其说这是参数传递,还不如说是直接使用的全局变量.所以,这种写法是没有必要的,一般情况下更多的是用到传递局部变量作为参数. 把代码修改一下: //var str = 'aaa'; var num = 2

  • JS中setTimeout的巧妙用法前端函数节流

    什么是函数节流? 函数节流简单的来说就是不想让该函数在很短的时间内连续被调用,比如我们最常见的是窗口缩放的时候,经常会执行一些其他的操作函数,比如发一个ajax请求等等事情,那么这时候窗口缩放的时候,有可能连续发多个请求,这并不是我们想要的,或者是说我们常见的鼠标移入移出tab切换效果,有时候连续且移动的很快的时候,会有闪烁的效果,这时候我们就可以使用函数节流来操作.大家都知道,DOM的操作会很消耗或影响性能的,如果是说在窗口缩放的时候,为元素绑定大量的dom操作的话,会引发大量的连续计算,比如

  • js中setTimeout的妙用--防止循环超时

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

  • JS中setTimeout和setInterval的最大延时值详解

    前言 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.而这篇文中主要给大家介绍的是关于JS中setTimeout和setInterval最大延时值的相关问题,需要的朋友们下面来一起学习学习吧. 先来看这样一段代码: function update() { loadData().then(function(data) { $('#content').html(data.content); var de

  • 快速掌握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中定时器setInterval和setTImeout的this指向问题

    前言 Js是一个单线程语言,可以通过setTimeout()和setInterval()来设置代码在指定时刻运行,前者是在指定时间后执行,后者是指每隔一段时间执行.两者的使用方法类似. 最近在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,详细的介绍通过一个示例展开,一起来看看吧. 如下例: var num = 0; function Obj (){ this.num = 1, this.getNum =

  • js 把字符串当函数执行的方法

    并且用js去执行: function test(str){ alert(str); } window['test']('aaaaaaaaaaaaaaaaaaaaa'); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] ------------------------------- 方法一... function test(str){ alert(str); } eval('test("aaaaaaaaaaaaaaaaaaa")'); [Ctrl+A 全选 注:如需引入外部J

随机推荐