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

EdwardUp 發布于2019-08-19 18:41 / 2483人閱讀

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

方法一：計數比較

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/

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/79878.html

Node_深入淺出Node

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

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

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

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

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

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

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

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

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

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