判斷資源并行加載完成的三種辦法：計數(shù)、Promise及 $.Deferred

EdwardUp 發(fā)布于2019-08-19 18:41 / 2530人閱讀

摘要：方法一計數(shù)比較方法二使用兼容的話需要引入庫方法三如果有更多請參考

方法一：計數(shù)比較

function loadImg(url, cb) {
    var img = new Image();
    img.src = url;
    img.onload = cb;
}

function loadImages(urlArr, afterAllLoadedFunc) {
    var count = urlArr.length;
    var loadedCount = 0;

    for (var i = count - 1; i >= 0; i--) {
        loadImg(urlArr[i], function () {
            loadedCount += 1;
            if (count === loadedCount) {
                afterAllLoadedFunc();
            }
        });
    }
}

loadImages(["./xx.jpg", "./yy.jpg", "./zz.jpg"], function () {
    alert("all imgs have been loaded");
});

方法二：Promise

// 使用 Promise
// 兼容的話需要引入 es6-promise 庫

var loadImg = function (url) {
    return new Promise(function (resolve, reject) {
        var img = new Image();
        img.src = url;
        img.onload = function () {
            resolve()  ;
        };
        img.onerror = function () {
            reject()  ;
        };
    });
};

Promise.all([
    loadImg("xxx.jpg"),
    loadImg("yyy.jpg"),
    loadImg("zzz.jpg"),
]).then(function () {
    alert("all images are loaded!")
});

方法三：$.Deferred

// 如果有jquery
var loadImg = function (url) {
    var defer = $.Deferred();

    var img = new Image();
    img.src = url;
    img.onload = function () {
        defer.resolve()  ;
    };
    img.onerror = function () {
        defer.reject()  ;
    };

    return defer.promise();
};

$.when(loadImg("xx.jpg"), loadImg("yy.jpg"), loadImg("zz.jpg")).done(function () {
    alert("all images are loaded!")
});

更多請參考 http://angusfu.github.io/slides/promise/

云服務(wù)器 GPU云服務(wù)器判斷js加載完成判斷一個js加載完成 promise_deferred區(qū)別云計算的三種服務(wù)模式

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/79878.html

相關(guān)文章

Node_深入淺出Node

摘要：簡介項目命名為就是一個服務(wù)器單純開發(fā)一個服務(wù)器的想法，變成構(gòu)建網(wǎng)絡(luò)應(yīng)用的一個基本框架發(fā)展為一個強制不共享任何資源的單線程，單進程系統(tǒng)。單線程弱點無法利用多核錯誤會引起整個應(yīng)用退出，應(yīng)用的健壯性大量計算占用導(dǎo)致無法繼續(xù)調(diào)用異步。 NodeJs簡介 Ryan Dahl項目命名為：web.js 就是一個Web服務(wù)器.單純開發(fā)一個Web服務(wù)器的想法，變成構(gòu)建網(wǎng)絡(luò)應(yīng)用的一個基本框架.Node發(fā)展...

shinezejian 2019-08-19 18:48 評論0 收藏0
javascript知識點

摘要：握手過程中使用了的標(biāo)志和。接收端收到后，回傳一個帶有標(biāo)志的數(shù)據(jù)包以示傳達確認信息。第四次揮手主動關(guān)閉方收到后，發(fā)送一個給被動關(guān)閉方，確認序號為收到序號，至此，完成四次揮手。其次，通過使和系統(tǒng)綁定來降低泄露后的危險。一些開放性題目 1.自我介紹：除了基本個人信息以外，面試官更想聽的是你與眾不同的地方和你的優(yōu)勢。 2.項目介紹 3.如何看待前端開發(fā)？ 4.平時是如何學(xué)習(xí)前端開發(fā)的？ 5....

zhangxiangliang 2019-08-20 14:21 評論0 收藏0
jQuery Deferred對象

摘要：給普通的操作指定回調(diào)函數(shù)對象的最大優(yōu)點，就是它把這一套回調(diào)函數(shù)接口，從操作擴展到了所有操作。方法用于指定對象狀態(tài)為已失敗時的回調(diào)函數(shù)。執(zhí)行完畢執(zhí)行成功執(zhí)行失敗接收一個或多個對象作為參數(shù)，為其指定回調(diào)函數(shù)。什么是deferred對象開發(fā)網(wǎng)站的過程中，我們經(jīng)常遇到某些耗時很長的javascript操作。其中，既有異步的操作（比如ajax讀取服務(wù)器數(shù)據(jù)），也有同步的操作（比如遍歷一個大型...

baoxl 2019-08-20 15:28 評論0 收藏0
一篇文章帶你嘗試拿下js異步

摘要：單線程就意味著，所有任務(wù)需要排隊，前一個任務(wù)結(jié)束，才會執(zhí)行后一個任務(wù)。這決定了它只能是單線程，否則會帶來很復(fù)雜的同步問題。小結(jié)本身是單線程的，并沒有異步的特性。當(dāng)異步函數(shù)執(zhí)行時，回調(diào)函數(shù)會被壓入這個隊列。走在前端的大道上本篇將自己讀過的相關(guān) js異步的文章中，對自己有啟發(fā)的章節(jié)片段總結(jié)在這（會對原文進行刪改），會不斷豐富提煉總結(jié)更新。概念 JS 是單線程的語言。單線程就意味著...

MartinDai 2019-08-21 18:24 評論0 收藏0
javascript異步編程詳解

摘要：在服務(wù)器端，異步模式甚至是唯一的模式，因為執(zhí)行環(huán)境是單線程的，如果允許同步執(zhí)行所有請求，服務(wù)器性能會急劇下降，很快就會失去響應(yīng)。第三是，捕捉不到他的錯誤異步編程方法回調(diào)函數(shù)這是異步編程最基本的方法。前言你可能知道，Javascript語言的執(zhí)行環(huán)境是單線程（single thread）。所謂單線程，就是指一次只能完成一件任務(wù)。如果有多個任務(wù)，就必須排隊，前面一個任務(wù)完成，再執(zhí)行后面...

huangjinnan 2019-08-20 10:48 評論0 收藏0