如何让 setInterval 等到另一个完成？答案

【问题标题】：How to make a setInterval wait until another one finishes?如何让 setInterval 等到另一个完成？
【发布时间】：2018-09-26 14:30:00
【问题描述】：

当我点击“一个”链接时，如何让第二个计数器等到第一个完成，然后计数到 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);
}

【问题讨论】：

标签： javascript jquery canvas html5-canvas

【解决方案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>

【讨论】：