剖析一小段简单而又复杂的js代码

, , ,

下面是一段非常简单的JavaScript代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
    <button onclick="test()">dianji</button>
</div>
<script>
    setTimeout(function () {
        alert('timer handler')
    }, 2000)
    function test () {
        document.addEventListener('click', function (e) {
            alert('click handler')
        }, false)

        var startTime = new Date()
        while ((new Date()).getTime() - startTime < 5000){}
    }

</script>

但是当你点击这个按钮时，产生的效果可能会让你有些困惑。下面我们来看下:

页面打开2s内点击一次按钮

这段JavaScript代码当你在页面打开2s时间内点击一次按钮，效果是这样的:

  1. 页面卡住大约5s钟
  2. 大约5s后弹出 click handler
  3. 点击弹窗确认后，弹出 timer handler

当你继续再次点击页面中的按钮，此时依次发生:

  1. 页面卡住大约5s钟
  2. 大约5s后弹出 click handler 两次!
  3. 点击两次弹窗的确认按钮后，弹出 timer handler

如果继续点击按钮，会出现同样的效果，且 click handler 弹出的次数会依次增加

分析

分析这段代码来看，点击按钮后，代码执行会进入 test 函数, test函数中首先对 document 对象绑定上了一个 click 事件。然后执行了一个5s的死循环。

此时页面卡住就是因为这个死循环

1
2
ar startTime = new Date()
while ((new Date()).getTime() - startTime < 5000){}

会导致js阻塞在这里. 在这5s时间内，2s的定时器其实已经定时完成，并把这个完成的事件放入到了任务队列中。当5s时间过去，点击按钮触发的这个test处理器执行完毕，本 click 事件会继续冒泡。（本质上是看下是否还有网页元素订阅了这个click事件）

由于在刚刚test函数执行期间，document对象上绑定上了 click 的监听，所以此时冒泡上来的 click 会触发document对象上的 click事件处理器， 因此弹出了 click handler.

当这个 click 冒泡完毕，所有的订阅者订阅的处理器都被完全处理完，js才会空闲，此时去查看任务队列中的任务，发现有个2s定时器的任务已经执行完毕，js开始执行定时器的回调函数，所以弹出了 time handler

当你第二次点击按钮，再次触发了 test 函数。 此时test函数内还是做了同样的事情，但是之前document上已经绑定了一个click的handler函数，所以第二次执行 test函数，会让 document对象的click处理器变成2个。 因此第二次点击按钮 click handler 会弹出2次

页面打开2s内点击一次按钮，然后第3s时点击页面空白处2次

这样操作的效果是这样的:

  1. 页面卡住大约5s钟
  2. 大约5s后弹出 ‘click handler’
  3. 弹出 ‘click handler’ 第二次
  4. 弹出 ‘click handler’ 第三次
  5. 弹出 ‘time handler’

第2点之所以出现在第5点之前，在上文我们已经讲过原因了—总之，基本上是因为click触发的时刻确实就比timer触发的早，肯定要等click的handler都处理完再执行timer处理器。

但至于第3、4点为什么出现在5之前，跟2出现在5之前的原因就不一样了，因为用户在页面上的第二次和第三次点击是在2s钟之后了，此时timer定时器肯定已经完成了，但是触发 click handler 依然在 timer handler 之前。 这是为什么呢？
这主要是因为js获取任务来执行时， 点击事件的任务队列 要优先于 timer事件的任务队列。 具体可参考我的另外一篇文章 浏览器的单线程机制和事件循环

在页面卡住的5s时间内，用户在页面上点击的2次事件会放入microTask任务队列，而timer是放入了macroTask任务队列。由于js空闲时优先要把click事件这种micro任务执行完，直到任务队列为空。所以就出现了上面 click handler 要比 timer handler 更早弹出的效果。

心得

  1. js中事件可以注册多个handler形成handlers. handlers类似于一个处理器的数组。事件触发后，该事件的handler处理器会被依次执行.
    假如在某个handler执行的过程中，又给该事件增加了新的handler，那么新增的这个handler不能立即执行。

    demo测试代码:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div>
        <button id="test" onclick="test()">dianji</button>
    </div>
    <script>
        function test () {
            alert('click handler 1');
            /* test函数触发的过程中，又给按钮绑定了新的handler; 但本次handlers遍历执行的过程中，不会执行新加入的这个handler */
            /* 因此，首次点击按钮， click handler2 不会弹出 */
            document.querySelector('#test').addEventListener('click', function (e) {
                alert('click handler 2')
            }, false);
        }

    </script>

  2. addEventListener 会给事件不断增加新的处理器handler

  3. 事件处理器handler在执行期间，事件还没有冒泡。此时还有机会给上层元素绑定事件处理器。

  4. 一个事件在冒泡过程中，要等所有订阅该事件的处理器都处理完毕，js才会去选择新的任务队列中的任务来执行。在事件触发后以及事件的冒泡过程中，会优先执行订阅了该冒泡事件的处理器，而不会去理会任务队列。

  5. 在事件循环中 microTask 优先于 marcroTask执行