通过alert方法,去理解js中阻塞、局部作用域、同步/异步任务

时间: 2018-01-12阅读: 3178标签: 异步

javascript中alert是Bom中的成员函数,BOM是以window对象为依托,代表浏览器窗口和页面的可见区域等,也就是说alert()实际上是window.alert()。


alert的对话框是模态的。对话框一般分为两种:模态和非模态,模态对话框:就是指除非采取有效的关闭手段,用户的鼠标焦点或者输入光标将一直停留在其上的对话框。非模态对话框则不会强制此种特性,用户可以在当前对话框以及其他窗口间进行切换。显然window.alert函数弹出的对话框是模态的,具有阻塞性质的,不点击是不会执行后续代码的。我们可以创建模态对话框与非模态对话框的相关语法:

//创建模态对话框: 
window.showModalDialog(sURL [, vFreeArgument] [, sOrnaments]); 
//创建非模态对话框: 
window.showModelessDialog(sURL [, vFreeArgument] [, sOrnaments]);


js的阻塞是指在调用结果返回之前,当前线程会被挂起, 只有在得到结果之后才会继续执行,例如以下代码不关闭alert,永远不会输出1。

alert("不关闭后面是不会执行的");
console.log(1);


已经知道alert()是阻塞式的,但是在定时器中会出现代码执行顺序的问题,例如:

(()=>{
    for(let i = 0; i < 5; i++){
        setTimeout(() => alert(i), 1000);
    }
})();

这里使用了let局部作用域,确保了输出结果不会每次都为5(改为var后,setTimeout在1秒后主线程是循环完成了的,i的值以及变为5了,就会造成结果一直为5)。我们会发现除了第一弹窗是0以外,后面的并没按顺序执行,如果把alert改为console.log(i)就可以按顺序输出。这是为什么呢?

首先js是一个单线程的,意味着所有任务都需要排队,等前一个任务结束才会执行后一个任务。在js中任务分为2类:同步任务和异步任务

同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;
异步任务:不进入主线程、而进入"任务队列"的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。  

setTimeout方法是异步任务, 它向“任务队列”依次添加执行函数。所以在alert 0的时候,不去点确定,主线程是被挂起的状态,如果在1秒内点确定会发现顺序就是是正常的,这是由于取消alert阻塞后"任务队列"为2的刚好进入主线程。如果很久才去点击确定,“任务队列”都进入主线程了,那么js会采用轮询再来处理剩下未执行的代码。




链接: http://www.fly63.com/article/detial/349

NodeJs中的异步

这篇文章主要讨论NodeJs中的异步问题。使用NodeJs编写进程也一年多了,在公司实习的时候,公司两个项目的后台都是我负责使用NodeJs和Sails框架编写的。工作模式主要是我在服务器端提供RESTful接口

ES6 Promise的执行顺序和异步性

我们知道Promise用来处理异步操作,异步操作的执行顺序是相对比较复杂的,如果再涉及到链式调用,则情况会变得更复杂。这篇文章会通过一个相对简单的代码示例来让大家对Promise的执行顺序和异步性有正确的理解

Js异步时序问题

不知你是否遇到过,向后台发送了多次异步请求,结果最后显示的数据却并不正确 -- 是旧的数据。具体情况:用户触发事件,发送了第 1 次请求

EventProxy的使用 - 解决异步回调地狱

最近在看node社区的nodeclub源码,看到一个玩意EventProxy,这里记录一下基本语法,EventProxy 可以理解为一个基于事件机制对复杂的业务逻辑进行解耦的工具,可以解决javascript异步回调地狱问题的工具

浅析JavaScript异步

一直以来都知道JavaScript是一门单线程语言,在笔试过程中不断的遇到一些输出结果的问题,考量的是对异步编程掌握情况。一般被问到异步的时候脑子里第一反应就是Ajax,setTimseout...这些东西

总结异步编程的六种方式

众所周知 JavaScript 是单线程工作,也就是只有一个脚本执行完成后才能执行下一个脚本,两个脚本不能同时执行,如果某个脚本耗时很长,后面的脚本都必须排队等着,会拖延整个程序的执行

解决Js异步回调的深层嵌套的3种方式

问题:解决异步回调的深层嵌套的问题.(回调地狱),promise对象用于表示一个异步操作的最终状态,promise在回调代码和将要执行这个任务的异步代码之间提供了一种可靠的中间机制来管理回调。

promise/async/await的执行顺序

上述,在Chrome 66和node v10中,正确输出是:执行async1函数,此函数中又调用了async2函数,输出async2 end。回到async1函数,遇到了await,让出线程。遇到setTimeout,扔到下一轮宏任务队列

js 多个异步的并发控制

请实现如下的函数,可以批量请求数据,所有的URL地址在urls参数中,同时可以通过max参数 控制请求的并发度。当所有的请求结束后,需要执行callback回调。发请求的函数可以直接使用fetch。

前端异步编程之Promise和async的用法

传统的异步解决方案采用回调函数和事件监听的方式,而这里主要记录两种异步编程的新方案:ES6的新语法Promise;ES2017引入的async函数;Generator函数(略)

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全