I need to implement a self-refreshing fragment using JS on my page. The catch is I need to be able to terminate the process when some action is performed and start again after.

Let's say I have:

$( document ).ready( function() {
    pageInit()
} )

function pageInit() {
    executeRefresh()
    doSomeOtherInitStuff() // refresh must be non-blocking!
}

function someAction() {
    stopRefresh() // stop refresh somehow??
    doSomething() // execute my action
    executeRefresh() // restart refresh
}

function executeRefresh() {
    setTimeout( function () {
        refreshFragment() // some function that refreshes my fragment
    }, 1000 )
}

So I need to have such order of things:

1. pageInit() executes automatically on page render
2. automatic refreshes start in background
3. some other initialization is performed (thus refresh is not blocking further execution)
4. user clicks a button that calls someAction()
5. automatic refreshes stop
6. action is executed (including some extensive DOM manipulation)
7. automatic refreshes start anew

This is needed due to actions reloading significant parts of page with server-side rendered fragments and in many cases the refreshes will not be applicable anymore.

I have read about requestIdleCallback() but am yet to understand how to stop such background tasks without fully reloading my page.

Any suggestions are greatly appreciated!

P.s. this is going to be a part of my common framework js that is included in all pages but only executes if elements with given attributes are present on page. So I cannot just plainly write the refresh as there might be multiple or none of such refreshable fragments on any page.