如何在不失去承诺的情况下编写这个链条?

时间:2016-08-07 12:07:53

标签: javascript promise reduce chain

当“读取”函数多次调用自身时(这实际上是通过块读取文件),我有这个(简化的)代码。问题在于,通过这样做(这就是我的想法),链条丢失,并且从未达到upload()函数的“then”。

换句话说,“hola”文本永远不会显示在控制台中。写这个的正确方法是什么?

谢谢,

https://jsfiddle.net/yewdmh2o/1/

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<nav class="navbar navbar-default navbar-static-top">

  <div class="container">

    <div class="navbar-header">
      <a class="navbar-brand" href="#">Progression</a>
      <a class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
    </div>

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Physio</a></li>
        <li><a href="#">Massage</a></li>
        <li><a href="#">Beauty</a></li>
        <li><a href="#">First Aid</a></li>
      </ul>
    </div>

  </div>

</nav>

<!-- Carousel -->


<!-- opening div -->    
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox"> 

    <!-- open listbox -->
    <div class="item active">
      <img class="img-responsive" src="https://lh4.googleusercontent.com/-aCIY16PFylg/VsW6L-YwpqI/AAAAAAAAADA/wSTG1QlJLqY/w1310-h524-no/Progression_Val_dIsere.png" alt="...">
      <div class="carousel-caption">
        <h4>Physio Massage Beauty First-Aid</h4>
      </div>
    </div>

    <div class="item">
      <img src="https://lh5.googleusercontent.com/-WHXl1TAoHoQ/VsW7_mHWeQI/AAAAAAAAAEQ/nzQm8w62c3s/w1310-h524-no/Progression_Massage_Budha.png" alt="...">
      <div class="carousel-caption">
        <h4>A wide range of Massage Therapies</h4>
      </div>
    </div>

    <div class="item">
      <img src="https://lh4.googleusercontent.com/-lj7DIStRI8M/VthrRPFcQFI/AAAAAAAAAFY/2ynRLjTZTnI/w1310-h524-no/Progression_Beauty_Therapies.png" alt="...">
      <div class="carousel-caption">
        <h4>Nails - Facials - Waxing</h4>
      </div>
    </div>

  </div> <!--close listbox -->

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <!-- Glyphicon Cheveron Left removed -->
    <span class="glyphicon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <!-- Cheveron Right removed -->
    <span class="glyphicon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>

</div>

<!-- Home Content Container-->

<!-- container opener -->   
<div class="container container-home">

  <!-- open row -->
  <div class="row">

    <!-- colums -->
    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="images/physiotherapy-concept-360x165.jpg" alt="...">
        <div class="caption">
          <h3>Physiotherapy</h3>
          <p>...</p>
        </div><!-- close caption -->  
      </div><!-- close thumbnail -->
    </div><!-- close colum -->

    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="images/massage360x165.jpg" alt="...">
        <div class="caption">
          <h3>Massage</h3>
          <p>...</p>
        </div><!-- close caption -->  
      </div><!-- close thumbnail -->
    </div><!-- close colum -->

    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="images/Facial2-360x165.jpg" alt="...">
        <div class="caption">
          <h3>Beauty</h3>
          <p>...</p>
        </div><!-- close caption -->  
      </div><!-- close thumbnail -->
    </div><!-- close colum -->

    <div class="col-xs-12 col-sm-6 col-md-3">
      <div class="thumbnail">
        <img src="images/First-aid-360x165.jpg" alt="...">
        <div class="caption">
          <h3>First aid</h3>
          <p>...</p>
        </div><!-- close caption -->  
      </div><!-- close thumbnail -->
    </div><!-- close colum -->

  </div><!-- close row -->

</div><!-- close container -->


<!-- nav footer -->
<div class="navbar navbar-default navbar-fixed-bottom">

  <!-- nav foot left items -->
  <a href="#" class="glyphicon glyphicon-earphone pull-left">
    <p class="navbar-text"> +33 62738 5646</p>
  </a>

  <div class="fblink">
    <!-- nav foot right items FB #x2 -->
    <a href="https://www.facebook.com/ProgressionPhysiotherapyMassageFirstAid/" class="fa fa-facebook-square fa-3x pull-right"></a>
  </div>  

</div><!-- close nav fix bottom -->

<nav class="navbar navbar-default navbar-fixed-bottom">
  <ul>
    <li><a href="#">+33 62738 5646</a></li>
    <li text-align="right"><a href="#">massage@progressionski.com</a></li>
  </ul>
  <div class="fblink">
    <!-- nav foot right items FB #x2 -->
    <a href="https://www.facebook.com/ProgressionPhysiotherapyMassageFirstAid/" target="_blank" class="fa fa-facebook-square fa-3x pull-right"></a>
  </div>
</nav>

编辑: 在@Bergi的帮助下解决,总是返回一个承诺,它可以保持链接过程并给出所需的结果,如下所示:

reading = function() {
    start++;
    upload();
};

var start = 0;
var end = 5;
var myArray = [3,5,7];
myArray.reduce(function(promise, item) {
    return upload()
    .then(function(){
        console.log('hola');
    })
})

function upload() {
    if (start < end) {
        console.log('doing')
        reading();
    } else {
        console.log('finished')
        return Promise.resolve();
    }
}

0 个答案:

没有答案