jquery deferred 按照顺序执行的一个问题

我最近在看 promise 相关的知识,看到了一个问题:

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

我测试了一下被采纳的答案,发现运行正常。

于是我又改写了一下,如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script type="text/javascript" src='/jquery-1.12.4.js'></script>
  <script type="text/javascript">
    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();
    };
      
    var tasks = [task1,task2,task3,task4];

    tasks.reduce(function(previous, p) {
      previous().then(p());
      $.Deferred().resolve();
    });
    // tasks.reduce((previous, p) => previous.then(p), $.Deferred().resolve());
  </script>
</body>
</html>

就会提示这样的错误
图片描述

想请教一下大家的看法,为什么会出错。

阅读 4k
2 个回答
tasks.reduce(function(previous, p) {
  previous().then(p());
  $.Deferred().resolve();
});

reduce 错了,reduce 有第二个参数。

这道题我又重新理解了一下,说一下我的看法吧;

实际上,这道题我想说的是,因为看到 @leftstick 用得是ES6的写法,担心在浏览器环境的兼容性不够好,

就想着把大佬给出的例子转换为ES5.一开始自己手写了一下,发现运行结果不正确。于是用babel转换了一下

clipboard.png

从结果来反推为什么我写的代码是错的就相对来说简单很多了。

首先,我错误的理解了 Array.prototype.reduce 函数,这个函数接受了2个参数,第一个为处理每个数组元素的

函数,第二个为可传递给函数的初始值。第一个处理函数的参数总共有4个,分别为:

  1. 初始值, 或者计算结束后的返回值
  2. 当前元素
  3. 当前元素的索引
  4. 当前元素所属的数组对象

按照上面的方式,来解读babel转换出来的代码:

clipboard.png

其实这一句:

$.Deferred().resolve()

他的作用也就是初始化一个空的deferred对象,我因为对于jquery的deferred不太了解,误以为是主动改变状态。

另外,在我自己的改写中,我把previouse当做了task1,这时我发现task1为函数,执行完后才为promise对象

所以自作聪明将其执行了。。。

上面就是我个人的理解。

诸位做过路过的大佬,看看这样理解是否正确。。多谢

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏