如何使setInterval等到另一个完成？

Question

当我单击“一个”链接时，如何使第二个计数器等待直到第一个计数器完成，然后计数到14（如第155行所示）？

https://jsfiddle.net/c4khk69f/27/

负责“一个”链接的函数是第43行上的函数progressSim（）。

$('a').on('click', function(e) {
  e.preventDefault();

        jQuery('.canvasmotherwrap').hide();
        jQuery('.canvasmotherwrap').fadeIn();     


        al = 0;
        al2 = 0;    

  window.clearInterval(sim1_1);
  window.clearInterval(sim1_2); 
  window.clearInterval(sim2);       

  var storedata = $(this).attr('data');

  console.log(storedata)
  window[storedata]();
});
var sim1_1;
var sim1_2;
var sim2;   


window.one = function() {

  sim1_1 = setInterval(progressSim, 10);
  sim1_2 = setInterval(progressSim, 1000);  
}


window.two = function() {

  sim2 = setInterval(progressSim2, 10);
}   

Answer 1

我不完全确定我了解您的要求，但是我认为您需要两个计数器，并且当“第一个”计数器完成时，第二个计数器应该启动并计数到“ 14”。

我希望这有帮助：

 function doWork(targetDiv, startTime, countTo, onDone) { var ticker = setInterval(function(){ diff = (((Date.now() - startTime) / 500) | 0); targetDiv.innerText = diff; if(diff < countTo){ return; } clearInterval(ticker); if(typeof(onDone) === 'function') { onDone(); } }, 100); } var divFoo = document.getElementById("foo"); var divBar = document.getElementById("bar"); // your on "click" doWork(divFoo, Date.now(), 5, function(){ doWork(divBar, Date.now(), 14); }); 

 <table><tr> <td><div id="foo">0</div></td> <td><div id="bar">0</div></td> </table>