关于JS的事件队列问题


function waitThreeSeconds() {
    var ms = 3000 + new Date().getTime();
    while (new Date() < ms) {}
    console.log('finished function');
}

function clickHandler() {
    console.log('click event!');
}

document.addEventListener('click', clickHandler);


waitThreeSeconds();
console.log('finished execution');

代码运行等待3秒钟打印出finished function和finished execution,问题在于在这3秒里点击页面,没有触发clickHandler,而且等待前面两个打印出来才有显示,解释下为啥点击最后才执行?


同楼上回答。

javascript 是的单线程的,于是就产生了一种任务执行机制叫 eventloop。它维护了一个任务队列,完成一个任务才会开始下一个任务。

你的 waitThreeSeconds 函数中的 while 会在将当前队列堵塞三秒钟,即使在这3秒内你触发了 click ,这个任务会被推入队列等待执行。

‘即使在这3秒内你触发了 click’ 这一句话可能会让你觉得和 ‘单线程’ 有些冲突,明确的来说: 执行javascript 确实是单线程。 至于为什么在队列被堵塞的时候,异步任务依旧会被加入队列,这就和浏览器的实现有关系了(浏览器可是多线程的)


因为JS是单线程的,你这里的waitThreeSeconds()函数阻塞/占用了进程运行,必须要等这里运行完了,JS进程空闲了出来才能去触发的那堆事件。
要想在这等待的三秒内也能也能触发,那就要使用异步函数。



相关阅读:
bootsrap页面布局需, 横向滚动条显示多个,固定左侧表头
build opencv.sln出错
如何去掉百度地图api中的建筑物名称
一个页面调用同一个modal,返回值问题。
libpython2.7.so是个什么?为什么我用virtualenv创建了新的env之后,这个文件没有多一个?
网站上的付费资源(小说,视频)如何防止爬虫抓取的?
.NET连接oracle实现用户登陆出问题
用ubuntu安装一个程序,请问到这一步以后该怎么做?
WIN7 64位 vs2005新建的BCG工程, 编译时报错无法打开包括文件:“BCGCBProInc.h”
关于项目框架。现在很多项目逻辑都放在前端处理,在选择框架的时候,你们是如何选择的呢?
ios block 置空处理用NULL还是nil
docker-compose.yml可以指定本地镜像吗,我发现去docker.io拉取镜像太慢
新版本Chrome下,trigger('click')上传文件控件后,选择文件弹窗显示太慢?
java自定义异常问题
求介绍windows环境nodejs命令行工具
react中怎样在父组件中获取子组件中的Dom
php哪些情况可以获取来源网站的域名
在Linux上用forever实现Node.js项目自启动,windows上相同功能的命令是什么?
资讯中心搭建思路问题。
如果说声明的变量和函数的都要占用栈或堆内存的空间 那么是否应该有选择的尽量减少声明



快速导航

Copyright © 2016 phpStudy |