requestAnimationFrame pauses execution automatically when the browser window loses focus. You can use a recursive setTimeout instead of a setInterval and encapsulate it in a requestAnimationFrame.

(function cleanGarbageLifecycle() {
  requestAnimationFrame(function() {
    setTimeout(function() {
      cleanGarbage();
      cleanGarbageLifecycle();
    }, 3000);
  });
})();

Hello Emmanuel, here's a pretty simple implementation of what you might consider doing

// Define a global variable to keep track of when this window is in focus
var windowFocused = true;

// Change the value of the windowFocused variable when the window is no longer in focus
window.addEventListener('blur', function(){
    windowFocused = false;
}, false);

// Change the value of the windowFocused variable when the window is in focus
window.addEventListener('focus', function(){
    windowFocused = true;
}, false);

// Your setInterval() function
setInterval(function() {
    if (windowFocused) {
        // Carry out your tasks here
        console.log('Window focused: ', windowFocused);
    }
}, 1000);

welcome to <code>requestAnimationFrame</code>. if you cannot give away from <code>setTimeout</code>, consider at least checking <code>document.hidden</code>.

Look at events that fire when the page goes out of view and set flags accordingly. Be aware that there are some gotchas with different browsers, webviews and so on.

I'm not aware of a function to pause an interval. I would simply stop it and restart the timer when scrolled into view/enters the page.

Edit: typos