Is there a better approach to using transitions within timer functions in d3js

I have a visualization that has a scatter plot with lines and another plot, both use a separate svg element.

To animate the visualization I use the timer function, however I need to transition circles in both scatter and plot with just circles and transition the line. This results me in having a timer function that has transitions and it looks like this

// 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)
   }

}

Now this works fine, but after some times the page becomes unresponsive. Is there a better way to do what I am doing?