咱们来聊聊JS中的异步,以及如何异步,菜鸟版

为什么需要异步?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无法捕获异步里面的代码。

有一起学习前端的私聊我。

时间: 2024-08-06 15:57:57

咱们来聊聊JS中的异步,以及如何异步,菜鸟版的相关文章

聊聊js中的typeof

内容: 1.typeof 2.值类型和引用类型 3.强制类型转换 typeof 官方文档:typeof 1.作用: 操作符返回一个字符串,指示未经计算的操作数的类型. 2.语法: typeof operand 参数:operand 是一个表达式,表示对象或原始值,其类型将被返回. 3.返回值: 类型 结果 Undefined "undefined" Null "object"(见下文) Boolean "boolean" Number "

互联网我来了 -- 2. js中&quot;异步/阻塞&quot;等概念的简析

一.什么是"异步非阻塞式"? 这个名字听起来很恶心难懂,但如果以 买内裤 这件事情来比喻执行程序的话就很容易理解"异步非阻塞式"的涵义了. 例如你是一个CPU的线程,你需要去执行一段 买内裤的程序, 你所需执行的步骤大致如下, 到一个商店里问老板, 你们店里还有没有nb牌内裤? 买到内裤,穿上 去小卖店买点火腿回家喂狗 这时候,你作为一个线程,你可能会遇到几种状况或选择. 店里面没货了,老板一直不答应你(阻塞你),你也一直等着(同步),第三天有货了才告诉你有了,你赶

浅谈JS中 reduce() 的用法

过去有很长一段时间,我一直很难理解 reduce() 这个方法的具体用法,平时也很少用到它.事实上,如果你能真正了解它的话,其实在很多地方我们都可以用得上,那么今天我们就来简单聊聊JS中 reduce() 的用法. 一.语法 arr.reduce(function(prev,cur,index,arr){ ... }, init); 其中, arr 表示原数组: prev 表示上一次调用回调时的返回值,或者初始值 init; cur 表示当前正在处理的数组元素: index 表示当前正在处理的数

js中for循环使用方法详解

大家好,今天我们来聊聊js中for循环,咱废话不多说直接进入主题: for语句是循环语句的一种用于创建一个循环,这是在开发中最常见的循环: for的语法for(初始值:条件判断:自身的改变){要重复执行的代码}: <script> var a=0;//定义一个变量 //循环6次,每次都执行a+1 for (i=0;i<6;i++){ a=a+1; console.log(a)//拿出a值看下变化过程 } </script> 下面我们来看下a的结果会是什么: 这就是a的变化过程

【转载】JS中bind方法与函数柯里化

原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情况戳这里ECMAScript 5 compatibility table),权威指南上提到在ES3中利用apply模拟该方法的实现(JS权威指南中函数那章), 但无法真实还原该方法, 这也是真bind方法中的有趣特性. (原文这边理解有问题, 这段话的意思如果结合犀牛书上下文的意思, 再结合犀牛书中

AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载.它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合.目前它已经被很多项目所接纳,包括jQuery(1.7). RequireJS RequireJS是一个工具库,主

JS中事件的执行顺序和AJAX的异步

之前了解过异步和同步,知道同步是顺序执行,异步是同时执行,但是没有遇到过这种情况,不是很理解,这两天做项目突然遇到了,对这有了一个初步的认识.废话不多说,直接上要求. 1.项目要求:外部调用xml文件,然后JS动态生成下拉菜单,使多个文件同时使用此菜单,方便维护. 如图,下面白色为以前的菜单,但是多个地图都需要写同样的菜单比较麻烦,也不好修改,所以做一个xml文件,存储菜单内容,然后多个地图调用,容易修改,蓝色部分菜单. 2.项目代码:此处我使用的Jquery addMenu(){ $.ajax

JS中的异步以及事件轮询机制

一.JS为何是单线程的? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊.(在JAVA和c#中的异步均是通过多线程实现的,没有循环队列一说,直接在子线程中完成相关的操作) JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个

promise 的基本概念 和如何解决js中的异步编程问题 对 promis 的 then all ctch 的分析 和 await async 的理解

* promise承诺 * 解决js中异步编程的问题 * * 异步-同步 * 阻塞-无阻塞 * * 同步和异步的区别? 异步;同步 指的是被请求者 解析:被请求者(该事情的处理者)在处理完事情的时候的通知机制. 异步:当事情处理完成后被请求者会发信息通知请求者该事情处理完成.在这期间被请求者可以选择是继续等待命令请求完成还是去做其他事等待被请求者返回. 同步:当事情处理完成后被请求者不会告知请求者,等到请求者发来询问是才会告知 阻塞:非阻塞 指的是请求者 阻塞:针对请求者来说的,委托其他人处理一