Javascript 在d3js中是否有更好的方法在计时器函数中使用转换

我有一个可视化，有一个带线的散点图和另一个图，两者都使用单独的svg元素

为了给可视化设置动画，我使用了定时器功能，但是我需要在散点和绘图中转换圆，只使用圆并转换线。这导致我有一个计时器函数，它有转换，它看起来像这样

// define scatter plot circles
// define scatter plot lines

let counter = 0

// define circles for a separate plot

function timer() {

  // update nodes for scatter plot circles

  // update nodes for bubbles circles

    scatterPlotCircles.selectAll("circle") 
         .data(scatterPlotData) 
         .transition() 
         .duration(800) 
         .attr("cx", function (d) {
              return d.x;
          })
         .attr("cy", function (d) {
              return d.y;
         })
         .attr("r", 4)
         .style("fill", function (d) {
            return d.color;
         })


     d3.selectAll(".bubblesClassName")
       .data(data)
       .transition()
       .attr("r", d => {
           console.log(d)
           return d.radius
       })


    //Update lines with transitions

   if(weekCounter %2 == 0) {
      setTimeOut(timer, 2000)
   } else {
      setTimeOut(timer, 4000)
   }

}

---

现在，这可以正常工作，但过了一些时间，页面变得没有响应。有没有更好的方法来完成我正在做的事情？

可能是这样递归地使用

setTimeOut

会导致内存泄漏

---

回想在遥远的过去，我曾经遇到过同样的问题，当我使用javascript函数

setInterval

时，问题就消失了。请参见

我的用例需要根据特定条件更新计时器，我尝试使用setInterval，但无法适应我的用例。用例是，我有一个变量，每次调用该函数时，我都会递增该变量，并根据该变量设置timerVal。我将用同样的方法更新代码。。