javascript - jquery $when 多个异步怎么变同步?

问题描述

问 题

想多个异步定时任务,一个接一个触发,不是同时触发

            var task1 = function(){
                var $d = $.Deferred();
                setTimeout(function(){
                    console.log('t1');
                    $d.resolve();
                },1000);
                return $d.promise();
            }

            //2
            var task2 = function(){
                var $d = $.Deferred();
                setTimeout(function(){
                    console.log('t2');
                    $d.resolve();
                },1200);
                return $d.promise();
            }

            //3
            var task3 = function(){
                var $d = $.Deferred();
                setTimeout(function(){
                    console.log('t3');
                    $d.resolve();
                },1200);
                return $d.promise();
            }

            //4
            var task4 = function(){
                var $d = $.Deferred();
                setTimeout(function(){
                    console.log('t4');
                    $d.resolve();
                },1200);
                return $d.promise();
            }
      
            $.when(task1(),task2(),task3(),task4()).done(function(){
                console.log('done');
            });

代码没有按预期的结果:t1,等待1秒后出现t2,后面的跟前面一样
但现实是同时触发出现了,不知道是不是哪里写错了...求指导,谢谢!
在线代码例子:可以运行看看效果
http://jsfiddle.net/Lq48vy7m/

如果是用then好像也不行,结果会更奇怪

　　
　var task1 = function(){
                var $d = $.Deferred();
                setTimeout(function(){
                    console.log('t1');
                    $d.resolve();
                },1000);
                return $d.promise();
            }

            //2
            var task2 = function(){
                var $d = $.Deferred();
                setTimeout(function(){
                    console.log('t2');
                    $d.resolve();
                },1200);
                return $d.promise();
            }

            //3
            var task3 = function(){
                var $d = $.Deferred();
                setTimeout(function(){
                    console.log('t3');
                    $d.resolve();
                },1200);
                return $d.promise();
            }

            //4
            var task4 = function(){
                var $d = $.Deferred();
                setTimeout(function(){
                    console.log('t4');
                    $d.resolve();
                },1200);
                return $d.promise();
            }
      
task1().then(task2()).then(task3()).then(task4()).then(function(){
                console.log('ok');
            })
      
　　

输出结果居然是

t1
ok
t2
t3
t4

在线地址:http://jsfiddle.net/rbtnmz2e/
改回这样就可以了

task1().then(function(){
                return task2()
            }).then(function(){
                return task3()
            }).then(function(){
                return task4()
            }).then(function(){
                console.log('ok');
            })

另外用那些比较好的异步库,如:when.js 那个?

解决方案

同时触发是正常的，因为你就是那样写的，看这里：

$.when(task1(),task2(),task3(),task4())

虽然用了when，但你确实是同时执行了task1()，task2()，task3()，task4()这四个函数，所以四个异步操作真心是同时触发的，没毛病！

补充：

如果你希望顺序执行上面4个异步任务，用下面这种方式：

var tasks = [
    function() {
        var $d = $.Deferred();
        setTimeout(function() {
            console.log('t1');
            $d.resolve();
        }, 1000);
        return $d.promise();
    },
    function() {
        var $d = $.Deferred();
        setTimeout(function() {
            console.log('t2');
            $d.resolve();
        }, 1200);
        return $d.promise();
    },
    function() {
        var $d = $.Deferred();
        setTimeout(function() {
            console.log('t3');
            $d.resolve();
        }, 1200);
        return $d.promise();
    },
    function() {
        var $d = $.Deferred();
        setTimeout(function() {
            console.log('t4');
            $d.resolve();
        }, 1200);
        return $d.promise();
    }
];

tasks.reduce((previous, p) => previous.then(p), $.Deferred().resolve());

这篇关于javascript - jquery $when 多个异步怎么变同步?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！