【異步編程】when.js

時間 2019-11-22

原文原文鏈接

var api = 'http://qgy18.imququ.com/file/when/d.php?cb=?';

var getData = function() {
    var deferred = when.defer();

    $.getJSON(api, function(data){
        deferred.resolve(data[0]);
    });

    return deferred.promise;
}

var getImg = function(src) {
    var deferred = when.defer();

    var img = new Image();

    img.onload = function() {
        deferred.resolve(img);
    };

    img.src = src;

    return deferred.promise;
}

var showImg = function(img) {
    $(img).appendTo($('#container'));
}

getData()
.then(getImg)
.then(showImg);

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script src="http://qgy18.imququ.com/file/when/when.js"></script>
    <div id="output"></div>
    <script>
        function run() {
            var deferred = when.defer();
            var start = 1;
            var end = 100;

            (function() {
                if (start <= end) {
                    deferred.notify(start);
                    start++;
                    setTimeout(arguments.callee, 50);
                } else {
                    deferred.reject('time out!');
                }
            })();

            return deferred.promise;
        }

        /**
         * then有三個參數，分別是onFulfilled、onRejected、onProgress，經過這三個參數，就能夠指定上一個任務在resolve(完成狀態)、reject(失敗狀態)和notify(執行狀態)時該如何處理 
         */
        run().then(undefined,
            function(reason) {
                alert(reason);
            }, function(s) {
                document.getElementById('output').innerHTML = s + '%';
            }
        );
    </script>
</body>
</html>

when.all

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script src="http://s0.qhimg.com/lib/jquery/183.js"></script>
    <script src="http://qgy18.imququ.com/file/when/when.js"></script>
    <div id="container"></div>
    <script>
        var getData = function() {
            var deferred = when.defer();
            deferred.resolve(["http:\/\/st.imququ.com\/uploads\/2011\/07\/IMAG0038_2.jpg","http:\/\/st.imququ.com\/uploads\/2011\/07\/wewewewe_1.jpg","http:\/\/st.imququ.com\/uploads\/2011\/07\/IMAG0014_2_1.jpg"]);
            return deferred.promise;
        }
         
        var getImg = function(src) {
            var deferred = when.defer();
            var img = new Image();
            img.onload = function() {
                //deferred.resolve(img);
            };
            img.src = src;
            deferred.resolve(img);
            return deferred.promise;
        }
         
        var showImgs = function(imgs) {
            console.log(imgs);
            $(imgs).appendTo($('#container'));
        }
         
        var getImgs = function(data) {
            var deferreds = [];
            for(var i = 0; i < data.length; i++) {
                deferreds.push(getImg(data[i]));
            }
            return deferreds;
        }
        // when.all接受一個promise數組，返回promise，這個promise會在promise數組中每個promise都resolve以後再resolve
        when.all(getData().then(getImgs)).then(showImgs);
    </script>
</body>
</html>

when.settle

var promise1 = function() {
    var deferred = when.defer();
    setTimeout(function() {
            console.log('A')
            deferred.reject('A');
        }, 2000);
    return deferred.promise;
};
 
var promise2 = function() {
    var deferred = when.defer();
    setTimeout(function() {
            console.log('B')
            deferred.resolve('B');
        }, 1000);
    return deferred.promise;
};

var f = function(result) {
    console.log(result);
}
 
when.settle([promise1(), promise2()]).then(f); // [promise1(), promise2()]無序 then有序

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。