JSFiddle - React, Tailwind, and code Playground

by ysuper

HTML

<h3>
確保「切青菜、切番茄、擺盤」三個動作都完成之後，我才能繼續「上菜」這個動作
</h3>

JavaScript

function serials(tasks, callback) {
  var step = tasks.length;
  var result = [];

  // 檢查的邏輯寫在這裡
  function check(r) {
    result.push(r);
    if( result.length === step ){
      callback();
    }
  }

  tasks.forEach(function(f) {
    f(check);
  });
}

function funcA(check){
  window.setTimeout(function(){
    console.log('A');
    check('A');
  }, (Math.random() + 1) * 1000);
}

function funcB(check){
  window.setTimeout(function(){
    console.log('B');
    check('B');
  }, (Math.random() + 1) * 1000);
}

function funcC(check){
  window.setTimeout(function(){
    console.log('C');
    check('C');
  }, (Math.random() + 1) * 1000);
}

function funcD(){
  console.log('上菜！');
}

serials([funcA, funcB, funcC], funcD);