javascript如何實現異步-js教程-PHP中文網

javascript實作非同步的方法：1、使用setTimeout方法；2、使用setImmediate 方法；3、使用requestAnimationFrame方法；4、監聽new Image載入狀態；5、監聽script載入狀態方法。

javascript如何實現異步

本教學操作環境：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);

登入後複製