再谈Javascript中的异步以及如何异步


Posted in Javascript onAugust 19, 2016

为什么需要异步?why?来看一段代码。

问题1:

for(var i=0;i<100000;i++){

}

alert('hello world!!!');

这段代码的意思是执行100...次后再执行alert,这样带来的问题是,严重堵塞了后面代码的执行,至于为什么,主要是因为JS是单线程的。

问题2:

我们通常要解决这样一个问题,如果我们需要在head里面加入script代码的话,一般会将代码写在window.onload里面(如果操作了dom的话),你有没有想过,为什么要加window.onload?原因就是你在操作dom的时候script后面的html代码浏览器还没有开始加载,结果人家还没有出生你就想着去娶她,这可能吗?当然不可能,加上window。onload之所以可以是因为,window.onload里面的代码是在文档全部加载完毕后执行的,也就相当于异步。

问题3:

有时候页面并不需要一次性把所有的代码都加载,更多的时候我们是按照某个需求才去加载某段代码的。 

什么是单线程?

你可以这样理解单线程就是代码一段一段的执行,先执行前面的,前面的执行完了再执行后面的。 

那JS中有哪些是异步的呢?

我相信这个东西,几乎都用烂了,它就是setTimeout/setInterval当然还有Ajax,Ajax异步我相信大家都知道,当然也可以同步但没人那么去做,但是对于setTimeout和setInterval是异步可能有些小伙伴不同了解,下面说说为什么说setTimeout是异步的。

setTimeout(function(){
console.log(0);
},0)

console.log(1);

// 1

// 0

运行这段代码后先打印的是1,而不是0,有些小伙伴是不是开始迷惑了,这里我们虽然给setTimeout设置的是0秒后执行console.log(0)  ,但是这个setTimeout很特别,因为它是异步的,我们先抛开这里为什么打印的是1然后才是0,先来聊聊什么是异步。 

什么是异步?

比方说有些饭店你去吃饭需要提前预定,等其他人吃完你才能去,因此在其他人吃饭的时候你可以去干其他的事情,等其他人吃完了会有人来通知你,于是你可以去了,那么对于代码来说,如ajax,你定义了一个回调方法,这个回调方法并不会当时就去执行,而是等待服务器响应完成之后才会去执行这段代码。 

我们回到前面那段setTimeout身上,它的工作原理是这样的,当你定义setTimeout那一刻起(不管时间是不是0),js并不会直接去执行这段代码,而是把它扔到一个事件队列里面,当页面中所有同步任务都干完了以后,才会去执行事件队列里面的代码。什么是同步,除了异步代码就是同步—_—。 

JS怎么实现异步?

1.利用setTimout实现异步

setTimeout(function(){
console.log(document.getElementByTagName('body')[0]);
},0)

但是setTimeout有些小小的问题,就是时间不精确,如果你想更快的执行这段代码我们可以使用html5提供的一个函数。

requestAnimationFrame(function(){
console.log(document.getElementByTagName('body')[0]);
})

requestAnimationFrame和setTimeout的区别就在于requestAnimationFrame比setTimeout更快执行,因此很多人用requestAnimationFrame来制作动画。

2.动态创建script标签

var head = document.getElementByTagName('head')[0];
var script = document.createElement('script');
script.src = '追梦子.js';
head.appendChild('script');

   3.利用script提供的defer/async

<script src="xx.js" defer></script>

defer:当页面加载完毕以后才去执行这段代码。

<script src="xx.js" async></script>

async:异步执行script代码

不过异步也是缺点的,比如下面这段代码:

  正常代码: 

 

try{
throw new Error('hello world');
}catch(err){

console.log(err);
}

// Error: hello world(…)

  异步代码:  

try{
setTimout(function(){


throw new Error('hello world');

},0)
}catch(err){

console.log(err);
}

// ReferenceError: setTimout is not defined(…)

可以发现catch里面的代码并没有执行,也就是说try无法捕获异步里面的代码。

总结

关于JS中的异步以及如何异步到这就基本结束,关于JS的异步算是老生常谈了,但是还是希望本文的内容对大家能有一些帮助。

Javascript 相关文章推荐
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
JSON格式化输出
Nov 10 Javascript
jQuery异步获取json数据方法汇总
Dec 22 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
JS对象和字符串之间互换操作实例分析
Feb 02 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
jQuery内容选择器与表单选择器实例分析
Jun 28 jQuery
VUE的history模式下除了index外其他路由404报错解决办法
Aug 21 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
用原生js统计文本行数的简单示例
Aug 19 #Javascript
jQuery购物网页经典制作案例
Aug 19 #Javascript
手机Web APP如何实现分享多平台功能
Aug 19 #Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 #Javascript
js实现select选择框效果及美化
Aug 19 #Javascript
JavaScript面向对象编写购物车功能
Aug 19 #Javascript
javascript设计模式之module(模块)模式
Aug 19 #Javascript
You might like
239军机修复记
2021/03/02 无线电
德生PL330测评
2021/03/02 无线电
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
基于swoole实现多人聊天室
2018/06/14 PHP
PHP生成随机码的思路与方法实例探索
2019/04/11 PHP
php自定义排序uasort函数示例【二维数组按指定键值排序】
2019/06/19 PHP
javascript字典探测用户名工具
2006/10/05 Javascript
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
2010/04/02 Javascript
JavaScript替换当前页面的方法
2015/04/03 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
2015/12/03 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
2016/12/13 Javascript
详解Vue 事件驱动和依赖追踪
2017/04/22 Javascript
微信小程序实现锚点定位楼层跳跃的实例
2017/05/18 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
nodejs创建简易web服务器与文件读写的实例
2017/09/07 NodeJs
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
2020/10/27 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
python访问系统环境变量的方法
2015/04/29 Python
使用python实现省市三级菜单效果
2016/01/20 Python
python设置值及NaN值处理方法
2018/07/03 Python
django商品分类及商品数据建模实例详解
2020/01/03 Python
tensorflow 固定部分参数训练,只训练部分参数的实例
2020/01/20 Python
Python3监控疫情的完整代码
2020/02/20 Python
HTML5 progress和meter控件_动力节点Java学院整理
2017/07/06 HTML / CSS
彪马荷兰官网:PUMA荷兰
2019/05/08 全球购物
Linux管理员面试经常问道的相关命令
2013/04/29 面试题
物流管理专业应届生求职信
2013/11/21 职场文书
保密承诺书范文
2014/03/27 职场文书
大班开学家长寄语
2014/04/04 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
质监局领导班子践行群众路线整改方案
2014/10/26 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书