JavaScript setTimeout issues

[jfuentesa]

Hello:

My problem is related to defining JavaScript timeouts.

I have set up a simple timeout to refresh the same page every 5 seconds, but I've noticed something peculiar. When I navigate away to a different page, it seems like the timeout is not being reset, and instead, it proceeds to refresh the previous page I was on. This is not the desired behavior.

My primary question is, is it possible to disable Turbo in Orchid? If so, how can I go about it? If not, is there a known workaround to this issue?

Thank you in advance.

[tabuna]

Hi @jfuentesa. Hotwired is like an emulation of SPA which saves state (like React/Vue/Angular). By that, if you have some global thing, you need to keep an eye on that state. The package relies more and more on the framework, so disabling it could have consequences. To deactivate it, you have to call it:

window.Turbo.session.drive = false

I don't recommend doing that. Maybe if you tell me the problem you want to solve by refreshing the page every 5 seconds, I can help you more effectively.

[jfuentesa]

Hi @tabuna, thank you for your fast reply.

I'll follow your recomendations, I'm not going to disable Turbo.

Referring to my problem, I need to reload a custom "monitoring" page continuously but, when I go to other page from the "monitoring" page, the setTimeout() stills active.

Do you have any recommendation to clear the timeout when the page changes?

[tabuna]

This is roughly what your JS controller will look like

export default class extends window.Controller {

 connect() {
   this.intervalId = setInterval(() => {
     window.location.reload()
   }, 5000)
 }

 disconnect() {
   clearInterval(this.intervalId)
 }
}

But you can not update full page and make even better (More difficult for a beginner), such as update only part of the page:

export default class extends window.Controller {
    static values = {
        url: String,
        refreshInterval: Number,
    };

    connect() {
        this.load();

        if (this.hasRefreshIntervalValue) {
            this.startRefreshing();
        }
    }

    disconnect() {
        this.stopRefreshing();
    }

    load() {
        fetch(this.urlValue, {
            redirect: 'error',
            headers: {
                'Turbo-Frame': this.element.id,
            },
        })
            .then((response) => (response.ok && response.status === 200 ? response.text() : null))
            .then((html) => {
                if (this.element.innerHTML !== html && html !== null) {
                    this.element.innerHTML = html;
                    this.element.classList.add('fade-in');
                }
            });
    }

    startRefreshing() {
        this.refreshTimer = setInterval(() => {
            this.load();
        }, this.refreshIntervalValue);
    }

    stopRefreshing() {
        if (this.refreshTimer) {
            clearInterval(this.refreshTimer);
        }
    }
}

Suppose we register it under the name content-loader and then it can be used like this:

<div data-controller="content-loader"
    id="monitoring-loader"
    data-turbo-permanent
    data-content-loader-url-value="{{ route('frame.monitoring') }}"
    data-content-loader-refresh-interval-value="50000"></div>

All content that will be received as a response will be inserted in <div> and will be updated every 5 seconds (Optional).

[dev-alihasan]

to address your JavaScript timeout problem, when you navigate away from a page, the timeout you set may still be active and will continue to execute unless explicitly cleared or cancelled. To avoid this behavior, you can use the clearTimeout() function to cancel the timeout when navigating away from the page.