Necesito implementar un fragmento de actualización automática usando JS en mi página. El problema es que necesito poder finalizar el proceso cuando se realiza alguna acción y comenzar de nuevo después.

Digamos que tengo:

 $( 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 ) }

Así que necesito tener tal orden de cosas:

1. pageInit() se ejecuta automáticamente en la representación de la página
2. las actualizaciones automáticas comienzan en segundo plano
3. se realiza alguna otra inicialización (por lo tanto, la actualización no bloquea la ejecución posterior)
4. el usuario hace clic en un botón que llama a someAction()
5. detener las actualizaciones automáticas
6. se ejecuta la acción (incluida una amplia manipulación DOM)
7. las actualizaciones automáticas comienzan de nuevo

Esto es necesario debido a las acciones que recargan partes significativas de la página con fragmentos renderizados del lado del servidor y, en muchos casos, las actualizaciones ya no serán aplicables.

He leído sobre requestIdleCallback() pero todavía tengo que entender cómo detener tales tareas en segundo plano sin recargar completamente mi página.

¡Cualquier sugerencia es bienvenida!

Ps, esto va a ser parte de mi marco común js que se incluye en todas las páginas, pero solo se ejecuta si los elementos con atributos dados están presentes en la página. Por lo tanto, no puedo simplemente escribir la actualización, ya que puede haber varios o ninguno de esos fragmentos actualizables en cualquier página.