如何为d3.interval传递动态延迟参数

d3.interval的延迟参数在初始化后是固定的，无法直接动态修改每次的间隔时间。要实现每次使用不同的延迟值，推荐采用**递归调用d3.timeout**的方式——因为d3.timeout是单次定时器，每次执行完成后可以根据当前计数设置下一次的延迟。

修改后的代码示例 #

JavaScript代码

const masterSelection = d3.selectAll('[class^="text"]');
const nodes = masterSelection.nodes();
let counterF = 0;
const desiredDelay = [0, 1000, 2000, 3000];

function executeNext() {
    if (counterF >= nodes.length) return;
    
    const element = nodes[counterF];
    console.log(element);
    counterF++;
    
    // 递归设置下一次定时器
    d3.timeout(executeNext, desiredDelay[counterF] || 0);
}

// 启动第一次执行，延迟为desiredDelay[0]
d3.timeout(executeNext, desiredDelay[0]);

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>
  <body>
    <div class='text1'>one</div>
    <div class='text2'>two</div>
    <div class='text3'>three</div>
    <div class='text4'>four</div>
  </body>
  <script type="text/javascript" src="prod.js"></script>
</html>

逻辑说明 #

1. 替换d3.interval为d3.timeout，利用单次定时器的特性实现动态延迟。
2. 第一次启动时使用desiredDelay[0]（0ms），直接执行第一个元素的操作。
3. 每次执行完目标操作后，计数自增，检查是否还有剩余元素：若有，则根据desiredDelay数组中的对应值设置下一次定时器；若无则终止流程。

内容的提问来源于stack exchange，提问作者smpa01