一个面试题

Question

<div id="outer" @click="fn">
  <div @click="fn" id="inner">
    click me
  </div>
</div>

methods: {
    fn() {
      console.log('start');
      setTimeout(() => {
        console.log('timeout');
      }, 0);
      this.$nextTick(() => {
        console.log('nextTick');  
        this.$nextTick(() => { console.log('nextTick2'); });
        setTimeout(() => { console.log('timeout2'); });
      });
      console.log('end');
    }
  }

点击outer的时候，执行fn的结果如下，这个我可以理解，因为nextTick是基于promise实现的，优先级高于setTimeout
start
end
nextTick
nextTick2
timeout
timeout2

---

但是点击inner的时候，由于冒泡会执行两次fn，结果如下：
start
end
nextTick
nextTick2
start
end
nextTick
nextTick2
timeout
timeout2
timeout
timeout2

---

这个我不大明白，为什么不是
先执行完同步代码，
再执行优先级高一点的nextTick，
然后再执行setTimeout
start
end
start
end
nextTick
nextTick2
nextTick
nextTick2
timeout
timeout2
timeout
timeout2

Answer 1

双越 2020-03-10 21:02:07

点击 inner ，根据事件冒泡机制，会执行两次 click 事件，即两次 fn 。DOM 事件的执行机制，其实有点类似于 setTimeout ，也是基于异步队列和 event loop 实现的。而不是用原生 js 执行了两次 fn();

这就类似于用 setTimeout 触发了两次 fn

setTimeout(fn);
setTimeout(fn);

如果这么考虑，是不是就跟答案一样了？

• 提问者 光天化日之下 #1

  是的，明白了
  网上查了下，事件回调和setTimeout都是宏任务

• Jack_WJQ 回复 提问者 光天化日之下 #2

  说一下，nextTick 的实现不一定是 Promise，也有可能是宏任务，具体要看浏览器环境的。

• 慕粉202224771 #3

  面试官考这个题的意义是什么啊?为了考倒面试者吗?

点开查看后面2条评论