关闭

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

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

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会采用轮询再来处理剩下未执行的代码。




站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

深入剖析setState同步异步机制

setState 的更新是同步还是异步,一直是人们津津乐道的话题。不过,实际上如果我们需要用到更新后的状态值,并不需要强依赖其同步/异步更新机制。

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

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

ES 新特性、异步、TypeScript

for 循环时是使用 var 定义循环变量 i (存在变量提升),然后依次为 a 数组元素赋值为一个函数,函数内打印 i;循环结束后调用 a[6]() ,相当于在全局环境下打印 i,而此时 i 已经变为 10。

JavaScript 异步进化史

JS 中最基础的异步调用方式是 callback,它将回调函数 callback 传给异步 API,由浏览器或 Node 在异步完成后,通知 JS 引擎调用 callback。对于简单的异步操作,用 callback 实现,是够用的

javascript如何实现异步请求?

JS中通常实现浏览器和服务器的数据交互,那么异步操作是关键的一部分:通常情况下,浏览器想服务器发送请求,服务器相应请求返回数据,浏览器执行异步操作。

深浅克隆和Promise异步编程

回调地狱:上一个回调函数中继续做事情,而且继续回调(在真实项目的AJAX请求中经常出现回调地狱)=>异步请求、不方便代码的维护,Promise的诞生就是为了解决异步请求中的回调地狱问题

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

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

es6异步解决方案

​由于最初j s官方没有明确的规范,各种第三方库中封装的异步函数中传的回调函数中的参数没有明确的规范, 没有明确各个参数的意义, 不便于使用。但是node中有明确的规范

Js异步编程async/await 函数

提起异步编程,大家可能会想到事件监听、回调函数、发布订阅、Promise 对象、Generator 函数、async 函数等,本篇主要讲解的是 async 函数,很多人认为它是异步编程的终极解决方案。

node的异步处理是怎么做的呢?

Node.js以其速度而闻名,因为它是非阻塞的。非阻塞意味着一个请求不会等待另一个请求结束(也就是异步的)。异步这一特性使Node.js成为当前吞吐量最大的框架

点击更多...

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