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

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

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

方法一：計(jì)數(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 庫(kù)

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!")
});

更多請(qǐng)參考 http://angusfu.github.io/slides/promise/

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/79878.html

相關(guān)文章

Node_深入淺出Node

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

shinezejian 2019-08-19 18:48 評(píng)論0 收藏0
javascript知識(shí)點(diǎn)

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

zhangxiangliang 2019-08-20 14:21 評(píng)論0 收藏0
jQuery Deferred對(duì)象

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

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

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

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

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

huangjinnan 2019-08-20 10:48 評(píng)論0 收藏0