Question

我有一个csv文件。我希望可视化文件中的元素，每个元素之间有一秒钟的延迟。我尝试了下面的代码，但所有记录元素都没有延迟地可视化。（这里我用colsole.log（）代替了可视化）

<script> 
  d3.csv("csv/AssassinsCreedOnlyLocation.csv",function(capitalsArray){
   var noOfTweets = capitalsArray.length;
   for(i=0; i<noOfTweets;i++){
    console.log(capitalsArray[i].Lat+" "+capitalsArray[i].Long);
    setTimeout(function(){
      console.log("......");
    },5000);
   }

  });

</script>

Answer 1

使用setTimeout的迭代方法必须计算数组中每个元素需要显示多长时间并为每个元素设置延迟执行，即：

for(i=0; i<noOfTweets;i++){
    setTimeout(
        function() {
            console.log(capitalsArray[i].Lat+" "+capitalsArray[i].Long);
        }, 
        5000 * i
    );
}

这种方法的问题在于它可以创建大量的计时器，我认为这不是一个好主意。

虽然我在评论中提到的使用setTimeout的递归方法是可行的，但更受欢迎和更容易的选择是依靠setInterval而不是setTimer：

var i = 0;
var intervalId = setInterval(
    function() {
        if (i == capitalsArray.length) {
            clearInterval(intervalId); // stops executing once we've browsed through the array
        } else {
            console.log(capitalsArray[i].Lat+" "+capitalsArray[i].Long);
            i++;
        }
    },
    5000
);

可视化csv元素，延迟介于两者之间

1 个答案: