Delaying 2 setIntervals using setTimeout doesn't work

I've been writing a userscript for a site and I want to show an update notification while the user is tabbed off of the site, and I came up with an idea to use the site title for that.

This is my current code:

let str = "Please update your script!"
let str2 = "[insert previous site title]"
setInterval(function(){document.title = str}, 1000)
setTimeout(function(){setInterval(function(){document.title = str2}, 1000)}, 1000)

the code should work in theory but instead flashes str for way less than 1000 ms, and goes back to str2 when done, and the routine never repeats, even with the setInterval.

I've tried moving the code to a function and using setInterval() on that too, but it does the same thing. The code in question:

function updateDialog(str, str2) {
    document.title = str
    setTimeout(function(){document.title = str2}, 1000)
}
setInterval(updateDialog("Please update your script!", "[insert previous site name]"), 1000)

I've already got the update check code for that, by the way.

Any reason for why this doesn't work the expected way?

Answer

Your idea makes sense—you want the tab title to blink between the update message and the original title to catch the user's attention. But the way you wrote it has a few hiccups:

1. Conflicting Timers
   In your first attempt, you set up two separate setInterval calls that fight each other. One keeps setting the title to "Please update your script!" every second, while the other (after a delay) keeps setting it back to the original title every second. They don’t sync up, so the title just flickers randomly instead of blinking cleanly.

2. Immediate Execution in setInterval In your second try, you accidentally called the function immediately updateDialog() instead of passing the function itself to setInterval. So it ran once and never repeated.

Here is the fix:

// Store the original title first
const originalTitle = document.title;
let showAlert = false; // Toggle state

// Blink every second
setInterval(() => {
    showAlert = !showAlert; // Flip between true/false
    document.title = showAlert ? "⚠️ Please update your script!" : originalTitle;
}, 1000);

If you want only to blink the title when the user switches tabs (saving CPU/battery), use this:

const originalTitle = document.title;
let blinkInterval;

// Trigger when tab visibility changes
document.addEventListener('visibilitychange', () => {
    if (document.hidden) {
        // Tab is hidden: start blinking
        blinkInterval = setInterval(() => {
            document.title = document.title.includes('⚠️') 
                ? originalTitle 
                : '⚠️ Please update your script!';
        }, 1000);
    } else {
        // Tab is visible again: stop blinking
        clearInterval(blinkInterval);
        document.title = originalTitle; // Restore original title
    }
});

Some browsers throttle timers in inactive tabs, so the blinking might slow down.