Question

我正在尝试让一个函数在另一个函数之后运行，但是并且完全同时运行了我的被调用函数。

控制台打印出2,1，并且应该是1是第一个，如何使完整的功能等待我的fetchingFunction完成执行，请帮忙

var loopControl = 0;

$('[data-toggle=tab]').on('show.bs.tab', function(e) {

  if (loopControl == 0) {
    e.preventDefault();

    var ref = $(this).attr('href').replace('#', '');
    loopControl = 1;

    $.ajax({
      url: fetchingFunction(),
      success: function() {
       
      },
      complete: function() {
         fakeFunction2();
         $('.' + ref + '_tab').click();
      }
    });
  } else {

    loopControl = 0;
  }
});

function fetchingFunction() {
  setTimeout(function() {
    console.log("1");
  }, 2000);

}

function fakeFunction2() {
    console.log("2")
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

<ul class="nav nav-tabs">
  <li><a class='aaa_tab' href="#aaa" data-toggle="tab">AAA</a></li>
  <li><a class='bbb_tab' href="#bbb" data-toggle="tab">BBB</a></li>
  <li><a class='ccc_tab' href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
  <div class="tab-pane" id="aaa">...Content1...</div>
  <div class="tab-pane" id="bbb">...Content2...</div>
  <div class="tab-pane" id="ccc">...Content3...</div>
</div>

View on JSFiddle

Answer 1

我修改了你的fetchingFunction以返回一个promise，所以它就像你在那里进行异步调用一样。

首先，调用fetchingFunction（），它返回一个promise。

其次，您附加了一个回调函数，以便它在promise完成后执行，接受返回的值。

var loopControl = 0;

$('[data-toggle=tab]').on('show.bs.tab', function(e) {
  if (loopControl != 0) return;

  loopControl = 1;
  e.preventDefault();

  var ref = this.href.replace('#', '');
  
  fetchingFunction().then(function(url){
    console.log(url);

    $.ajax({
      url: url,
      complete: function() {
         fakeFunction2();
         //$('.' + ref + '_tab').click();
         loopControl = 0; //processing is done, reset the lock
      }
    });
  });
});

function fetchingFunction() {
  return new Promise(function(resolve, reject){
    setTimeout(function() {
      console.log("1");
      resolve('https://stackoverflow.com/');
    }, 2000);
  });
}

function fakeFunction2() {
    console.log("2");
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />

<ul class="nav nav-tabs">
  <li><a class='aaa_tab' href="#aaa" data-toggle="tab">AAA</a></li>
  <li><a class='bbb_tab' href="#bbb" data-toggle="tab">BBB</a></li>
  <li><a class='ccc_tab' href="#ccc" data-toggle="tab">CCC</a></li>
</ul>
<div class="tab-content" id="tabs">
  <div class="tab-pane" id="aaa">...Content1...</div>
  <div class="tab-pane" id="bbb">...Content2...</div>
  <div class="tab-pane" id="ccc">...Content3...</div>
</div>

等待功能完成以运行下一个

1 个答案: