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

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

赞 (0)

相关推荐

  • JavaScript异步加载浅析

    前言 关于JavaScript脚本加载的问题,相信大家碰到很多.主要在几个点-- 1> 同步脚本和异步脚本带来的文件加载.文件依赖及执行顺序问题 2> 同步脚本和异步脚本带来的性能优化问题 深入理解脚本加载相关的方方面面问题,不仅利于解决实际问题,更加利于对性能优化的把握并执行.   先看随便一个script标签代码-- 复制代码 代码如下: <script src="js/myApp.js"></script> 如果放在<head>上面

  • JavaScript系列之―同步还是异步？

    从今天开始,我会不定期的写一些关于JavaScript的东西,包括语言,应用等方面.组成JavaScript系列. 如果没有特殊的说明,这里假定JavaScript的执行环境是在浏览器(browser)当中的. 今天开始第一次,讨论一下同步和异步. 曾经查询过一些JavaScript的信息,发现google出来的结果都是询问JavaScript如何能够实现异步的代码. 而我,很不幸,查询的却是如何让JavaScript实现异步调用的同步(是不是挺起来很诡异). 首先说一下JavaScript当中

  • js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)

    看个例子: 复制代码 代码如下: <input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /> <script type="text/javascript"> <!-- function addImg(isrc) { var Img = new Image(); Img.src = isrc; I

  • JavaScript异步编程Promise模式的6个特性

    在我们开始正式介绍之前,我们想看看Javascript Promise的样子: 复制代码 代码如下: var p = new Promise(function(resolve, reject) {  resolve("hello world");}); p.then(function(str) {  alert(str);}); 1. then()返回一个Forked Promise 以下两段代码有什么区别呢? 复制代码 代码如下: // Exhibit Avar p = new Pr

  • js中同步与异步处理的方法和区别总结

    在使用异步请求时,有时需要将异步请求的结果返回给另一个js函数,此种情况下会出现未等异步请求返回请求结果,该发送请求所在js函数已经执行完后续操作,即已经执行return ,这样会导致return的结果为空字符. 总结:若要在使用ajax请求后处理发送请求返回的结果,最好使用同步请求. 例如:以下例子会出现返回结果不正确的情况,因为ajax异步请求还未执行完,函数已经执行return了, 复制代码 代码如下: function fn(){ var result = " "; $.aja

  • javascript 文件的同步加载与异步加载实现原理

    HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行.除IE和较新版本的Firefox外,其他浏览器并未支持. language: 已废弃.大部分浏览器会忽略该值. src: 可选.指定引入的外部代码文件,不限制后缀名. type: 必选.指定脚本的内容类型(M

  • js 异步操作回调函数如何控制执行顺序

    需求: fun A() { asyn(parm1, parm2, onsuccess(){ }) ;} fun B() {asyn(paem1, parm2, onsuccess(){}) ;} 函数B要求执行在函数A之后 异步执行 如果直接使用 A(); B(); 是不能够满足执行条件的. 考虑将B作为回调函数传递给A,然后A再执行的onsucess中执行B函数 A(B); 即可实现功能需求. js是单线程的. 1.调用函数时,如果参数多于定义时的个数,则多余的参数将会被忽略,如果少于定义时的

  • 详谈nodejs异步编程

    详谈nodejs异步编程

    目前需求中涉及到大量的异步操作,实际的页面越来越倾向于单页面应用.以后可以会使用backbone.angular.knockout等框架,但是关于异步编程的问题是首先需要面对的问题.随着node的兴起,异步编程成为一个非常热的话题.经过一段时间的学习和实践,对异步编程的一些细节进行总结. 1.异步编程的分类 解决异步问题方法大致包括:直接回调.pub/sub模式(事件模式).异步库控制库(例如async.when).promise.Generator等. 1.1 回调函数 回调函数是常用的解决异

  • js异步加载的三种解决方案

    默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的. (1) defer,只支持IE defer属性的定义和用法(我摘自w3school网站) defer 属性规定是否对脚本执行进行延迟,直到页面加载为止. 有的 javascript 脚本 document.write 方法来创建当前的文档内容,其他脚本

  • 再谈Javascript中的基本类型和引用类型(推荐)

    一.基本类型和引用类型概述 js中数据类型的值包括:基本类型值和引用类型值 基本数据类型:undefined;null;boolean;number;string 引用类型值:保存在内存中,js不允许直接访问内存位置,因此时操作引用而不是实际对象 二.如何检测数据类型 1.基本数据类型的检测:使用typeof var s = "AAA"; alert(typeof s); //返回string 2.引用类型(对象类型)检测:使用instanceof alert(person insta

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

    为什么需要异步?why?来看一段代码. 问题1: for(var i=0;i<100000;i++){ } alert('hello world!!!'); 这段代码的意思是执行100...次后再执行alert,这样带来的问题是,严重堵塞了后面代码的执行,至于为什么,主要是因为JS是单线程的. 问题2: 我们通常要解决这样一个问题,如果我们需要在head里面加入script代码的话,一般会将代码写在window.onload里面(如果操作了dom的话),你有没有想过,为什么要加window.on

  • 再谈JavaScript中bind、call、apply三个方法的区别与使用方式

    call的基本使用 var ary = [12, 23, 34]; ary.slice(); 以上两行简单的代码的执行过程为:ary这个实例通过原型链的查找机制找到Array.prototype上的slice方法,让找到的slice方法执行,在执行slice方法的过程中才把ary数组进行了截取. 注意:slice方法执行之前有一个在原型上查找的过程(当前实例中没有找到,再根据原型链查找). 当知道了一个对象调用方法会有一个查找过程之后,我们再看: var obj = {name:'iceman'

  • 浅谈javascript中的加减时间

    上午在处理一些js中的日期参数的时候遇到了一点问题,不晓得如何加减时间. 最初的想法是自己分别取出year,month,day,hour,minute,second,然后手动加...开始想直接来个借位符就好了,后来一想,哪有那么容易. 最后,经过一个上午的摸索,终于搞定了. 首先是怎么显示一个标准的日期时间格式   "yyyy-mm-dd hh:MM:ss",暂时做法是先 var dtNow=new Date().//当前时间 标准的日期时间就拼出来,dtNow.getFullYear

  • 浅谈javascript中关于日期和时间的基础知识

    前面的话 在介绍Date对象之前,首先要先了解关于日期和时间的一些知识.比如,闰年.UTC等等.深入了解这些,有助于更好地理解javascript中的Date对象.本文将介绍javascript关于日期和时间的基础知识 标准时间一般而言的标准时间是指GMT和UTC,以前是GMT,现在是UTC GMT 格林尼治标准时间(GMT)是指位于伦敦郊区的皇家格林尼治天文台的标准时间,因为本初子午线被定义在通过那里的经线 理论上来说,格林尼治标准时间的正午是指当太阳横穿格林尼治子午线时(也就是在格林尼治上空

  • 浅谈JavaScript中的对象及Promise对象的实现

    浅谈JavaScript中的对象及Promise对象的实现

    JavaScript 中的所有事物都是对象:字符串.数值.数组.函数.下面小编给大家收集整理些javascript中的对象及promise对象的实现.具体内容如下: 到处都是对象 window对象 常用的属性和方法介绍 location 包含页面的URL,如果改变这个属性,浏览器会访问新的URL status 包含将在浏览器状态去显示的一个串.一般在浏览器左下角 onload: 包含了需要在页面完全加载后调用的函数 document: 包含DOM alert方法: 显示一个提醒 prompt方法

  • 浅谈javascript中的三种弹窗

    js中三种弹窗 1)alert 弹出警告 无返回值---------alert('第一行\n第二行'); 2)confirm()选择确定或取消,返回t或f----var result = confirm('是否删除!'); 3)prompt()弹出输入框,返回输入内容----var value = prompt('输入你的名字:', '请在这里输入名字'); 当然也可以自定义好看的样式.下面代码有问题明天再改. <script> //window.confirm //prompt window

  • 浅谈JavaScript中this的指向问题

    JavaScript中this指向问题 记得初学 JavaScript 时,其中 this 的指向问题曾让我头疼不已,我还曾私自将其与闭包.原型(原型链)并称 JS 武林中的三大魔头.如果你要想在 JS 武林中称霸一方,必须将这三大魔头击倒.个人认为在这三大魔头中,this 指向问题的武功最菜(难度最低).俗话说柿子捡软的捏,那我们就先从 this 指向问题下手. 先记住攻克 this 指向问题的口诀(前辈们的总结):哪个对象调用函数,函数里的 this 就默认指向哪个对象(注意 this 只能

  • 浅谈JavaScript中this的指向更改

    JS中this指向的更改 JavaScript 中 this 的指向问题前面已经总结过,但在实际开中, 很多场景都需要改变 this 的指向. 现在我们讨论更改 this 指向的问题. call更改this指向 call 的使用语法:func.call(thisArg, arg1, arg2, ...) call 方法需要一个指定的 this 值( this要指向的对象 )和一个或者多个参数.提供的 this 值会更改调用函数内部的 this 指向. // 使用 call 方法改变调用函数执行上

  • 浅谈JavaScript 中的延迟加载属性模式

    目录 一.前言 二.按需属性模式 三.凌乱的延迟加载属性模式 四.类的唯一自己的延迟加载属性模式 五.对象字面量的延迟加载属性模式 六.结论 一.前言 传统上,开发人员在 JavaScript 类中为实例中可能需要的任何数据创建属性.对于在构造函数中随时可用的小块数据来说,这不是问题.但是,如果在实例中可用之前需要计算某些数据,您可能不想预先支付该费用.例如,考虑这个类: class MyClass { constructor() { this.data = someExpensiveCompu

随机推荐