如何在JavaScript中固定間隔后的固定次數調用函數

Question

我想在固定的時間間隔后固定次數調用on事件函數。

代碼示例不起作用

function work(i){
   remove();
   draw(i);          
 } 

d3.select("body").select('button').on('click', function() {
 for(var i=0;i<7;i++){
   setTimeout(function(i){
     remove();
     draw(i);
    },1500);                                    
   }
 });

我的代碼有什么問題，請提供解決方案。

Answer 1

您的所有setTimeout調用都在循環中緊接着彼此進行，而不必等待彼此完成。 您可以使用setInterval來實現所需的功能：

function work(i) {
   remove();
   draw(i);          
} 

d3.select("body").select('button').on('click', function () {
    work(0);
    var times = 1,
        myInterval = setInterval(function () {
            work(times);
            times++;
            if (times === 7) {
                clearInterval(myInterval);
            }
        }, 1500);
});

Answer 2

使用setTimeout嘗試這個簡單的解決方案

function work(i){
   remove();
   draw(i); 
   if(i<=7){//set your condition
    setTimeout(function(i){
      i++;
      work(i);
    },1500); 
   }         
 } 

d3.select("body").select('button').on('click', function() {
  work(0);
});

我認為，使用setTimeout比setInterval更安全