javascript實現(xiàn)異步的方法

這篇文章給大家分享的是有關javascript實現(xiàn)異步的方法的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷推廣、網(wǎng)站重做改版、北海網(wǎng)站定制設計、自適應品牌網(wǎng)站建設、H5頁面制作、商城系統(tǒng)網(wǎng)站開發(fā)、集團公司官網(wǎng)建設、成都外貿網(wǎng)站建設、高端網(wǎng)站制作、響應式網(wǎng)頁設計等建站業(yè)務，價格優(yōu)惠性價比高，為北海等各大城市提供網(wǎng)站開發(fā)制作服務。

javascript實現(xiàn)異步的方法：1、使用setTimeout方法；2、使用setImmediate 方法；3、使用requestAnimationFrame方法；4、監(jiān)聽new Image加載狀態(tài)；5、監(jiān)聽script加載狀態(tài)方法。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版，DELL G3電腦。

javascript實現(xiàn)異步的方法：

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、監(jiān)聽new Image加載狀態(tài)：通過加載一個data:image數(shù)據(jù)格式的圖片，并監(jiān)聽器加載狀態(tài)實現(xiàn)異步。

盡管部分瀏覽器不支持data:image圖片數(shù)據(jù)格式，但仍然可以觸發(fā)其onerror狀態(tài)實現(xiàn)異步，但IE8及以下對data:image數(shù)據(jù)格式的圖片，onerror為同步執(zhí)行

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、監(jiān)聽script加載狀態(tài)

原理同new Image是一樣的，生成一個data:text/javascript的script，并監(jiān)聽其加載狀態(tài)實現(xiàn)異步。

盡管部分瀏覽器不支持data:text/javascript格式數(shù)據(jù)的script，但仍然可以觸發(fā)其onerror、onreadystatechange事件實現(xiàn)異步。

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;
                //執(zhí)行并刪除隊列中的第一個
                queue.shift()();
            };
            _body.appendChild( script );
        }
    })();
asynByScript( function() {
    console.log(1);
} );
console.log(2);

感謝各位的閱讀！關于“javascript實現(xiàn)異步的方法”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前題目：javascript實現(xiàn)異步的方法
文章出自：http://muchs.cn/article14/picsde.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、軟件開發(fā)、動態(tài)網(wǎng)站、企業(yè)網(wǎng)站制作、服務器托管、網(wǎng)站內鏈

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容