最近在b站上看到一个有趣的demo。由于js 事件循环机制的特殊性，造成了代码执行顺序截然不同的结果。
let btn = document.querySelector('#btn1')
btn.addEventListener('click', () => {
Promise.resolve().then(() => {console.log(1)})
console.log(2)
})
btn.addEventListener('click', () => {
Promise.resolve().then(() => {console.log(3)})
console.log(4)
})
btn.click() // 代码调用click
以上是通过代码的形式调用click方法去触发click事件，了解异步的童鞋大都应该知道执行顺序是
但当我们手动点击这个按钮的时候呢？
答案就截然不同了
这就造成了在真实项目中可能出现自动化测试时没有发现bug，而上线之后就....
为什么会出现这种情况？
当我们用代码调用click方法时，可以把click方法看成一个整体，而click方法内部的实现其实是放在了同一个栈里面，既然在同一个栈里，当js运行到此处时，就会按照事件循环的机制运行该部分的代码。
而用户异步去点击按钮，我们都知道addEventListener添加的事件并不会覆盖，而是追加，所以此时相当于绑定了两个click事件， click事件是异步的，所以在第一个click事件执行完之前，第二个click始终是等待状态，再按照异步的规则第一个事件输出2，1， 第二个输出4，3.
