Question

我之前刚问了一个类似的问题，但现在我决定将它改成一个新问题。

我使用d3.js.名为A的数组存储3种颜色，我想通过一个填充我的元素链接的循环。不幸的是，这个循环非常快，只有最后一个元素在屏幕上可见，这意味着只有绿色。

如何延迟此过程？这意味着将链接变为蓝色，等待2秒，将它们变为红色，等待另外2秒，最后将它们变为绿色？

这是我的代码......

var A = ["blue", "red", "green"]

for (var i = 0; i < A.length; i++){
    link.style("stroke", function(d){
       return A[i];
    }) 
 };

Answer 1

如果你不介意ES8答案（很酷但很新的东西）：

//a simple timer
var time=ms=>new Promise(res=>setTimeout(res,ms));

//the main function
async function loop(){
  var A = ["blue", "red", "green"]
  for ( var i = 0; i < A.length; i++){
     link.style("stroke", function(d) { return A[i];   }) 
     //here comes the magic part
     await time(5000);//wait 5 seconds
  }        
}
loop();

或者使用伪传递计时器（包括ES6对象解构）：

(function iterate([current,...rest]){
  if(!current) return;
  link.style("stroke", function(d) { return current;   })
  setTimeout(iterate,5000,rest);
})(["blue", "red", "green"]);

Answer 2

取自W3Schools：

setTimeout(function(){ alert("Hello"); }, 3000);

这样做是等待3秒，然后警告'你好'。

使用这个概念，你可以将你的循环重写为递归，然后使用setTimeout将它链接起来，延迟时间为2秒左右。您的基本案例将是最后一种颜色，您不希望在其中设置超时。

Answer 3

您可以设置多个超时：

var A = ["blue", "red", "green"]

for ( var i = 0; i < A.length; i++){
    setTimeout(function(){
        link.style("stroke", function(d) {
            return A[i];
        });
    }, 2000*i)
};

Answer 4

delay = 2000;
var i=0;
var handle = setInterval( function() {
    if (i >= A.length) {
        clearInterval(handle);
    } else {
        link.style("stroke", function(d) { return A[i++]});
    }
}, delay);

Answer 5

有很多简单的javascript答案，因为你正在使用d3，我将提供一种方法来使用d3来实现这种效果（我已经包含了转换）：

＆＃13;

var svg = d3.select("body")
  .append("svg")
  .attr("width",400)
  .attr("height",400);
  
var circle = svg.append("circle")
  .attr("cx",100)
  .attr("cy",100)
  .attr("r",20)
  .attr("stroke","black");
  
var colors = ["orange","steelblue","lawngreen","pink","darkgreen","purple"];


var i = 0
transition(i);

function transition(i) {
  if (colors[i]) {
  circle.transition()
    .attr("fill",function() { return colors[i]; })
    .duration(1000)
    .each("end", function() { transition(++i) });
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

.each方法（v3）现在是.on（v4），并在每个转换端（对于每个元素）调用，因此如果转换多个元素，则需要检查有多少元素已完成转换：

＆＃13;

var svg = d3.select("body")
  .append("svg")
  .attr("width",400)
  .attr("height",400);
  
var circles = svg.selectAll("circle")
  .data([1,2])
  .enter()
  .append("circle")
  .attr("cx",function(d) { return d * 100; })
  .attr("cy",100)
  .attr("r",20)
  .attr("stroke","black");
  
var colors = ["orange","steelblue","lawngreen","pink","darkgreen","purple"];


var i = 0
transition(i);

function transition(i) {
  var n = 0; // # of elements done this transition
  if (colors[i]) {
  circles.transition()
    .attr("fill",function() { return colors[i]; })
    .duration(1000)
    .each("end", function() { if (++n == circles.size()) { transition(++i) } });
  }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

＆＃13;

如何延迟循环？或者如何使循环更慢？

5 个答案: