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

所属分类: 网络编程 / JavaScript 阅读数: 1625
收藏 0 赞 0 分享

为什么需要异步?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的异步算是老生常谈了,但是还是希望本文的内容对大家能有一些帮助。

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多