原生javascript实现异步的7种方式
1、$(document).ready
点评： 需要引用jquery ；兼容所有浏览器。
2、标签的async=”async”属性
async的定义和用法(是HTML5的属性)
async 属性规定一旦脚本可用，则会异步执行。
点评：HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。 async 属性仅适用于外部脚本（只有在使用 src 属性时）。
3、defer属性
<script type="text/javascript" defer="defer">
alert(document.getElementById("p1").firstChild.nodeValue);
</script>
点评：兼容所有浏览器。此外，这种方法可以确保所有设置defer属性的脚本按顺序执行
async和defer看起来差不多呀？而且经常一起出现！来辨析一下：
（1）如果没有async和defer属性，那么浏览器会立即执行当前的JS脚本，阻塞后面的脚本；
（2）如果有async属性，加载和渲染后续文档的过程和当前JS的加载与执行并行进行（异步），它是乱序执行的，不管你声明的顺序如何，只要它加载完了就会执行；
（3）如果有defer属性，加载后续文档元素的过程和JS的加载是并行进行（异步）的，但是JS的执行在所有元素解析完成之后进行，而且它是按照加载顺序执行脚本的
4、动态创建
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
(function(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
var tmp = document.getElementsByTagName('script')[0];
tmp.parentNode.insertBefore(s, tmp);
})();
</script>
</head>
<body>
<img src="https://images0.cnblogs.com/i/121863/201405/222202573569862.jpg" />
</body>
</html>
原生的javascript 实现异步的方式其实远远不至7种， 大可以分3类：
1、延迟类型：setTimeout（setInterval也是可以的）、requestAnimationFrame、setImmediate（IE10及以上）
2、监听事件实现的类型：监听new Image加载状态、监听script加载状态、监听iframe加载状态、Message
3、带有异步功能类型 Promise、ajax( XMLHttpRequest、ActiveXObject)、Worker；
考虑到 ：iframe 效率过慢； ajax 在ie下一定要加载真实的文件才能触发open及send；Worker 虽然具有异步特性，但它属于多线程的范畴，需要将主要的算法写在单独的js文件中才能完整体现其优点，若单单为了异步化而使用的话太浪费了。 所有这3种方式就不列出。
一、实现异步的方式：
1、setTimeout：这个是最简单的
setTimeout( function() {
console.log();
});
console.log();
2、setImmediate ：IE10添加的新功能，专门用于解放ui线程。IE10以下及其他浏览器不支持
setImmediate(function(){
console.log();
});
console.log();
3、requestAnimationFrame ：HTML5/CSS3时代新产物，专门用于动画。低级浏览器不支持
var asynByAniFrame = (function(){
var _window = window,
frame = _window.requestAnimationFrame
|| _window.webkitRequestAnimationFrame
|| _window.mozRequestAnimationFrame
|| _window.oRequestAnimationFrame
|| _window.msRequestAnimationFrame;
return function( callback ) { frame( callback ) };
})();
asynByAniFrame(function(){
console.log();
})
console.log();
4、监听new Image加载状态：通过加载一个data:image数据格式的图片，并监听器加载状态实现异步。
尽管部分浏览器不支持data:image图片数据格式，但仍然可以触发其onerror状态实现异步，但IE8及以下对data:image数据格式的图片，onerror为同步执行
function asynByImg( callback ) {
var img = new Image();
img.onload = img.onerror = img.onreadystatechange = function() {
img = img.onload = img.onerror = img.onreadystatechange = null;
callback();
}
img.src = "data:image/png,";
}
asynByImg(function(){
console.log();
});
console.log();
5、监听script加载状态
原理同new Image是一样的，生成一个data:text/javascript的script，并监听其加载状态实现异步。
尽管部分浏览器不支持data:text/javascript格式数据的script，但仍然可以触发其onerror、onreadystatechange事件实现异步。
var asynByScript = (function() {
var _document = document,
_body = _document.body,
_src = "data:text/javascript,",
//异步队列
queue = [];
return function( callback ) {
var script = _document.createElement("script");
script.src = _src;
//添加到队列
queue[ queue.length ] = callback;
script.onload = script.onerror = script.onreadystatechange = function () {
script.onload = script.onerror = script.onreadystatechange = null;
_body.removeChild( script );
script = null;
//执行并删除队列中的第一个
queue.shift()();
};
_body.appendChild( script );
}
})();
asynByScript( function() {
console.log();
} );
console.log();
6、Message：html5新技能，通过监听window.onmessage事件实现，然后postMessage发送消息，触发onmessage事件实现异步
var asynByMessage = (function() {
//异步队列
var queue = [];
window.addEventListener('message', function (e) {
//只响应asynByMessage的召唤
if ( e.data === 'asynByMessage' ) {
e.stopPropagation();
if ( queue.length ) {
//执行并删除队列中的第一个
queue.shift()();
}
}
}, true);
return function( callback ) {
//添加到队列
queue[ queue.length ] = callback;
window.postMessage('asynByMessage', '*');
};
})();
asynByMessage(function() {
console.log();
});
console.log();
7、Promise： ES6的新技能，具有异步性质
var asynByPromise = (function() {
var promise = Promise.resolve({
then : function( callback ) {
callback();
}
});
return function( callback ) {
promise.then(function(){
callback();
})
};
})();
asynByPromise(function() {
console.log();
});
console.log();
原生javascript实现异步的7种方式的更多相关文章
- JavaScript 创建对象的七种方式
转自:xxxgitone.github.io/2017/06/10/JavaScript创建对象的七种方式/ JavaScript创建对象的方式有很多,通过Object构造函数或对象字面量的方式也可以 ...
- JavaScript创建对象的几种 方式
//JavaScript创建对象的七种方式 //https://xxxgitone.github.io/2017/06/10/JavaScript%E5%88%9B%E5%BB%BA%E5%AF%B9 ...
- js处理异步的几种方式
Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推) ...
- [转载]javascript创建对象的几种方式
原文链接:http://qingfeng825.iteye.com/blog/1935648 1. 工厂方法:能创建并返回特定类型对象的工厂函数(factory function). function ...
- JavaScript事件处理的三种方式(转)
一.什么是JavaScript事件? 事件(Event)是JavaScript应用跳动的心脏,也是把所有东西粘在一起的胶水,当我们与浏览器中Web页面进行某些类型的交互时,事件就发生了. 事件可能是用 ...
- 总结javascript继承的两种方式的N中写法
最近翻看博客园,总结了一下javascript的继承方式:prototype和copy继承方式. 一.prototype方式 当一个函数被创建时,Function构造函数产生的函数会隐式的被赋予一个p ...
- javascript实现继承3种方式： 原型继承、借用构造函数继承、组合继承，模拟extends方法继承
javascript中实现继承的三种方式:原型继承.借用构造函数继承.混合继承: /* js当中的继承 js中 构造函数 原型对象 实力对象的关系: 1 构造函数.prototype = 原型对象 2 ...
- Flex（ActionScript）与JavaScript交互的两种方式示例
随着各单位部门信息化进程的不断发展,互通互联.共享协调不断的被越来越多的客户所重视.很多新项目都要去必须能够集成已有的早期系统,至少也要能够实现交互对接.今天跟大家分享的是系统对接中ActionScr ...
- JavaScript声明全局变量三种方式的异同
JavaScript中声明变量很简单var(关键字)+变量名(标识符). 方式1 1 2 var test; var test = 5; 需注意的是该句不能包含在function内,否则是局部变量.这 ...
随机推荐
- BZOJ3355 : [Usaco2004 Jan]有序奶牛
对于一条边x->y,若去掉之后x不能到达y,那么它是必需的. 首先拓扑排序求出拓扑序,然后按照终点拓扑序为第一关键字,起点拓扑序为第二关键字从小到大加边. 对于每个点,维护一个bitset,表示 ...
- Javascript 严格模式use strict详解
1.概述 除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode).顾名思义,这种模式使得Javascript在更严格的条件下运行. ...
- 数据库操作类——C#
整理数据库操作类以便取用: using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...
- Linux——线程
线程 我们都知道一个程序的执行是由进程来完成的,而进程里真正执行代码却是由线程来完成,它是真正的执行流.通常将一个程序⾥里一个执行路线就叫做线程(thread).对它更准确的定义是:线程是“一个进程内 ...
- Android Studio 怎样打JAR包
Android Studio 怎样打JAR包 在eclipse中我们知道怎样将一个项目导出为jar包,供其他项目使用. 在AS中能够通过改动gradle才处理. 我们新建一个项目MakeJar,在项目 ...
- Swift iOS 文件操作：沙盒（SandBox）、程序包（NSBundle）
1.沙盒机制介绍 iOS 中的沙盒机制(SandBox)是一种安全体系.每个 iOS 应用程序都有一个单独的文件系统(存储空间),而且只能在对应的文件系统中进行操作,此区域被称为沙盒.所有的非代码文件 ...
- Java异常(三) 《Java Puzzles》中关于异常的几个谜题
概要 本章介绍<Java Puzzles>中关于异常的几个谜题.这一章都是以代码为例,相比上一章看起来更有意思.内容包括:谜题1: 优柔寡断谜题2: 极端不可思议谜题3: 不受欢迎的宾客谜 ...
- Linux学习13-CentOS安装ab做压力测试
前言 网站性能压力测试是服务器网站性能调优过程中必不可缺少的一,测试环境准备好了后,如何对网站做压力测试? 压力测试的工具很多,如:ab.http_load.webbench.siege.jmeter ...
- Android实现图片裁剪
MainActivity.java package com.kale.imagetailor; import java.io.File; import java.io.FileNotFoundExce ...
- Easyui dialog Y轴滚动条定位
使用Easyui dialog进行数据新增的时候,如果Y轴方向有滚动条,当关闭之前的时候,将滚动条拉到最下方,再次打开的时候,滚动条还是定位在最下方. 需求: 每次打开的时候dialog Y轴滚动条定 ...