如何让d3.interval首次回调立即执行，后续按指定延迟执行？

可以实现，不需要额外创建多个定时器，只需要在初始化d3.interval前手动调用一次回调函数即可，同时保证后续定时器按预期的延迟运行。

背景说明 #

d3.interval的默认行为是首次回调会在指定延迟del后才触发，如果需要首次立即执行，最直接的方案是提前手动调用回调，再启动定时器。

修改后的实现代码 #

首先引入D3.js脚本：

<script type="text/javascript" src="https://d3js.org/d3.v7.min.js"></script>

JavaScript逻辑：

console.log(new Date());
const del = 1000;

// 单独定义回调函数，便于复用和维护
const tickCallback = (elapsed) => {
    console.log(new Date(), elapsed);
    // 运行超过3秒后停止定时器
    if (elapsed > 3000) {
        ticker.stop();
    }
};

// 首次立即执行回调，传入0作为初始耗时（贴合d3.interval的参数逻辑）
tickCallback(0);

// 启动d3.interval，后续每隔del毫秒执行一次回调
let ticker = d3.interval(tickCallback, del);

逻辑说明 #

• 将回调函数抽离出来，避免重复编写相同逻辑，同时保证手动调用和定时器触发的逻辑一致
• 手动调用tickCallback(0)实现首次立即执行，参数0对应d3.interval回调中的elapsed参数（表示从定时器启动到当前的耗时）
• 启动d3.interval后，后续的回调会严格按照指定的del延迟执行，直到满足停止条件

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