关闭

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

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

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

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

怎样取消 JavaScript 中的异步任务?

有时候执行异步任务可能是很困难的,尤其是在特定的编程语言不允许取消被错误启动或不再需要的操作时。幸运的是 JavaScript 提供了非常方便的功能来中止异步活动。在本文中,你可以学到如何创建可中止的函数。

Js如何处理循环的异步操作

compute.exec()这是个异步方法,在里面处理一些实际业务,这时候打印出来的很可能就是300,300,300(因为异步for循环还没有等异步操作返回Promise对象过来i值已经改变)

前端异步是什么?哪些情况下会发生异步?

这里就不拿官方的解释来解答了,只以个人理解来回答问题,轻喷。我们知道JavaScript是单线程的,不像java等语言是多线程的,所以一般情况下,js代码是一行一行的执行的。但是某些时候需要用异步来提升性能

解决异步编程的方法:promise与await

Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API

在现代JavaScript中编写异步任务

在本文中,我们将探讨过去围绕异步执行的JavaScript的演变以及它如何改变我们编写和读取代码的方式。我们将从Web开发的开始,一直到现代异步模式示例

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

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

js处理异步的几种方式

回调函数易造成回调函数地狱,回调函数中嵌套多个回调函数,因为多个异步操作造成强耦合,代码乱做一团,无法管理。事件监听使用不方便,每次都要手动地绑定和触发事件

如何优化async代码?更好的编写async异步函数

如何优化async代码?更好的编写async函数:使用return Promise.reject()在async函数中抛出异常,让相互之间没有依赖关系的异步函数同时执行,不要在循环的回调中/for、while循环中使用await,用map来代替它

解读react的setSate的异步问题

将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能,React可能会推迟它,稍后会一次性更新这些组件。React不会保证在setState之后,能够立刻拿到改变的结果。

promise/async/await的执行顺序

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

点击更多...

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