如何观察JS的事件队列的执行划分

时间：2021-07-13 22:31:56

也就是说，不同的操作函数，操作符，JS将其放入事件队列是不一样的。。。

比如：

外部函数和内部函数，就是分两次放入事件循环的尾端的。

比如，多个操作符组成的链式操作，也有可能是放不同的操作批次进入事件循环链的。

因为下面代码中的输出就显示了异步事件循环在JS当中的体现。

好好体味了一个小时。

var test = function() {

    for(var i = 0; i < 5; i++) {
        console.log(i+ " test outter");

        (function(i) {
          setTimeout(function() {
            console.log(i);
        }, 2000);
        })(i);

    }

};

var test2 = function() {
    var ret = [];
     for(var i = 0; i < 5; i++) {
       console.log(i+ " test2 outter");
        (function(i) {
          ret[i] = function() {
          console.log(i + " test2 inner");
          return i;
        }
        })(i);
      }
    console.log(ret);
    return ret;
};

var test0 = test(), test1 = test2()[2]();
var test2 = test2()[2](), test3 = test();

　　输出：

"0 test outter"
"1 test outter"
"2 test outter"
"3 test outter"
"4 test outter"
"0 test2 outter"
"1 test2 outter"
"2 test2 outter"
"3 test2 outter"
"4 test2 outter"
[function () {
        window.runnerWindow.proxyConsole.log(i + " test2 inner");
        return i;
      }, function () {
        window.runnerWindow.proxyConsole.log(i + " test2 inner");
        return i;
      }, function () {
        window.runnerWindow.proxyConsole.log(i + " test2 inner");
        return i;
      }, function () {
        window.runnerWindow.proxyConsole.log(i + " test2 inner");
        return i;
      }, function () {
        window.runnerWindow.proxyConsole.log(i + " test2 inner");
        return i;
      }]
"2 test2 inner"
"0 test2 outter"
"1 test2 outter"
"2 test2 outter"
"3 test2 outter"
"4 test2 outter"
[function () {
        window.runnerWindow.proxyConsole.log(i + " test2 inner");
        return i;
      }, function () {
        window.runnerWindow.proxyConsole.log(i + " test2 inner");
        return i;
      }, function () {
        window.runnerWindow.proxyConsole.log(i + " test2 inner");
        return i;
      }, function () {
        window.runnerWindow.proxyConsole.log(i + " test2 inner");
        return i;
      }, function () {
        window.runnerWindow.proxyConsole.log(i + " test2 inner");
        return i;
      }]
"2 test2 inner"
"0 test outter"
"1 test outter"
"2 test outter"
"3 test outter"
"4 test outter"
0
1
2
3
4
0
1
2
3
4

　　

相关文章