如何将JavaScript的异步方法改写成长尾词？

本文共计700个文字，预计阅读时间需要3分钟。

方法：1. 使用setTimeout；2. 使用setImmediate；3. 使用requestAnimationFrame；4. 通过监听new Image加载状态来实现；5. 通过监听script加载状态来实现；6. 使用Message等类似机制。操作环境：本教程操作环境。

方法：1、利用setTimeout；2、利用setImmediate；3、利用requestAnimationFrame；4、通过监听“new Image”加载状态来实现；5、通过监听script加载状态来实现；6、利用Message等等。

本教程操作环境：windows7系统、javascript1.8.5版、Dell G3电脑。

原生javascript实现异步的方式：

1、setTimeout：这个是最简单的

setTimeout( function() { console.log(1); }); console.log(2);

2、setImmediate ：IE10添加的新功能，专门用于解放ui线程。IE10以下及其他浏览器不支持

setImmediate(function(){ console.log(1); }); console.log(2);

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(1); }) console.log(2);

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(1); }); console.log(2);

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(1); } ); console.log(2);

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(1); }); console.log(2);

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(1); }); console.log(2);

更多编程相关知识，请访问：编程视频！！

以上就是javascript实现异步的方法有哪些的详细内容，更多请关注自由互联其它相关文章！