如何顺序或同步执行功能

Question

我有 4 个函数要按顺序执行。

特别是第 4 个函数应该只在前面的 3 个函数都完成时才执行。

我尝试使用回调，但可以肯定我没有正确使用它。如何使其连续。

我听说过 JavaScript 中的 then 函数，但看起来它只适用于 ECMAScript 6（不确定），但是当我尝试在脚本中使用它时出现未定义的错误。

function longRunningFunction(callBack) {

  setTimeout(function() {
    $('#div1').html('Div1 Done');
  }, 5000);
  setTimeout(function() {
    $('#div2').html('Div2 Done');
  }, 5000);
  setTimeout(function() {
    $('#div3').html('Div3 Done');
  }, 5000);

  callBack();

}
longRunningFunction(function() {
  setTimeout(function() {
    $('#div4').html('But changes 1st!');
  }, 3000);
});

#div4 {
  font-weight: bold;
  color: red;
}

#div1 {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div4">
  My content should be changes at last!
</div>
<div id="div1">
  Div1
</div>
<div id="div2">
  Div2
</div>
<div id="div3">
  Div3
</div>

Answer 1

您可以使用Promises 来实现。
为每个将要发生的异步更改设置一个承诺，并使用Promise#all 等待它们完成：

Promise.all([p1, p2, p3]).then(() => {
  callBack();
});

演示：

function longRunningFunction(callBack) {

  let p1 = new Promise((resolve, reject) => {
    setTimeout(function() {
      $('#div1').html('Div1 Done');
      resolve();
    }, 5000);
  });

  let p2 = new Promise((resolve, reject) => {
    setTimeout(function() {
      $('#div2').html('Div2 Done');
      resolve();
    }, 5000);
  });

  let p3 = new Promise((resolve, reject) => {
    setTimeout(function() {
      $('#div3').html('Div3 Done');
      resolve();
    }, 5000);
  });

  Promise.all([p1, p2, p3]).then(() => {
    callBack();
  });
}
longRunningFunction(function() {
    $('#div4').html('But changes 1st!');
});

#div4 {
  font-weight: bold;
  color: red;
}

#div1 {
  margin-top: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div4">
  My content should be changes at last!
</div>
<div id="div1">
  Div1
</div>
<div id="div2">
  Div2
</div>
<div id="div3">
  Div3
</div>

Answer 2

你有关于 setTimeout 的 x4 函数，所以你可以结合简单的函数 whit promise 和 async/await 功能：

只需将() => console.log() 替换为() => $('#div1').html('Div1 Done');

function sequentialTimeout(time, func){
  return new Promise(resolve => setTimeout(() => resolve(func()), time));
}

async function sequence(){
  await sequentialTimeout(500, () => console.log('1'))
  await sequentialTimeout(500, () => console.log('2'))
  await sequentialTimeout(500, () => console.log('3'))
  sequentialTimeout(500, () => console.log('4'))
}

sequence()

Answer 3

正如另一个答案所说，您可以使用 Promises。但是，如果您认为对于这样一个简单的用例（可以说是这样）来说，这太过“繁重的机器”，您可以为每个成功的超时设置一个标志，然后在所有设置完成后触发回调。以下是一种方式：

function longRunningFunction(callBack) {

  var done = [false, false, false];

  function checkIfDone(cb) {
    if (done[0] && done[1] && done[2]) {
      cb();
    }
  }

  setTimeout(function() {
    $('#div1').html('Div1 Done');
    done[0] = true;
    checkIfDone(callBack);
  }, 5000);
  setTimeout(function() {
    $('#div2').html('Div2 Done');
    done[1] = true;
    checkIfDone(callBack);
  }, 5000);
  setTimeout(function() {
    $('#div3').html('Div3 Done');
    done[2] = true;
    checkIfDone(callBack);
  }, 5000);
}
longRunningFunction(function() {
  setTimeout(function() {
    $('#div4').html('But changes 1st!');
  }, 3000);
});

Answer 4

你可以试试生成器

function* generateSequence() {
  yield 1;
  yield 2;
  return 3;
}

let generator = generateSequence();

let one = generator.next();

alert(JSON.stringify(one)); // {value: 1, done: false}