Delaying 2 setIntervals using setTimeout doesn't work

General
1

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?

2

Issues in Your First Code

javascript

Copy

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);

  1. Multiple setInterval Calls Conflict:
  • The first setInterval changes the title to str every 1000ms.
  • The setTimeout waits 1000ms, then starts another setInterval that changes the title to str2 every 1000ms.
  • These two setInterval calls run concurrently, causing the title to flicker between str and str2 rapidly. This explains why str appears for less than 1000ms—it’s being overwritten by the second setInterval.
  1. No Clear Toggle Logic:
  • The code doesn’t alternate between str and str2 in a controlled way. Instead, it sets up two competing intervals, leading to unpredictable behavior.
  1. No Repeating Routine:
  • The setTimeout only delays the start of the second setInterval. It doesn’t create a repeating toggle between the two titles. Once both intervals are running, they keep overwriting each other indefinitely.

Issues in Your Second Code

javascript

Copy

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

  1. Incorrect setInterval Syntax:
  • When you call setInterval(updateDialog(“Please update your script!”, “[insert previous site name]”), 1000), you’re immediately invoking updateDialog and passing its return value (which is undefined) to setInterval. This means setInterval is trying to execute undefined every 1000ms, which does nothing.
  • Instead, you need to pass a function reference to setInterval, like this: setInterval(() => updateDialog(“Please update your script!”, “[insert previous site name]”), 1000).
  1. Non-Repeating Behavior:
  • Even if you fix the setInterval syntax, the updateDialog function only sets the title to str, waits 1000ms, then sets it to str2. When setInterval calls updateDialog again, it repeats this process, but the timing overlaps. This can cause the title to flicker or not display as expected.
  1. Lack of Toggle State:
  • The function doesn’t maintain a state to alternate between str and str2. Each call to updateDialog resets the title to str and then str2, without coordinating with previous calls.

Corrected Solution

To achieve a reliable, repeating toggle between the update notification (str) and the original title (str2) every second, you can use a single setInterval with a state variable to alternate between the two titles. Here’s the corrected code:

javascript

Copy

`let str = “Please update your script!”;
let str2 = document.title; // Capture the original title
let isUpdateMessage = true; // State to track which title to show

setInterval(function() {
document.title = isUpdateMessage ? str : str2;
isUpdateMessage = !isUpdateMessage; // Toggle the state
}, 1000);`

Explanation of the Solution

  1. Single setInterval:
  • Using one setInterval avoids conflicts between multiple intervals. It runs every 1000ms and alternates the title.
  1. State Tracking:
  • The isUpdateMessage boolean tracks whether to show str or str2. It flips each time the interval runs, creating a smooth toggle.
  1. Dynamic Original Title:
  • Instead of hardcoding str2, we capture the page’s original title using document.title at the start. This ensures the script works on any page without needing to manually specify the title.
  1. No Overlap:
  • Since there’s only one setInterval and no competing setTimeout, the title changes cleanly every 1000ms.

Optional Enhancements

  • Check for Tab Visibility: If you only want the notification to appear when the user is tabbed away, you can use the visibilitychange event to start/stop the interval:

javascript

Copy

`let str = “Please update your script!”;
let str2 = document.title;
let isUpdateMessage = true;
let intervalId = null;

function startTitleToggle() {
if (!intervalId) {
intervalId = setInterval(function() {
document.title = isUpdateMessage ? str : str2;
isUpdateMessage = !isUpdateMessage;
}, 1000);
}
}

function stopTitleToggle() {
if (intervalId) {
clearInterval(intervalId);
intervalId = null;
document.title = str2; // Reset to original title
}
}

document.addEventListener(‘visibilitychange’, function() {
if (document.hidden) {
startTitleToggle();
} else {
stopTitleToggle();
}
});

// Start the toggle if the tab is initially hidden
if (document.hidden) {
startTitleToggle();
}`

  • Clear Interval After Update: If the user updates the script, you can stop the title toggle by calling clearInterval(intervalId) and resetting document.title = str2.

Why Your Code Didn’t Work as Expected

  • First Code: The two setInterval calls ran simultaneously, causing rapid title changes and flicker.
  • Second Code: The setInterval was incorrectly set up, executing updateDialog immediately and passing undefined to setInterval. Even if fixed, the function’s logic didn’t support a proper toggle.

The corrected solution uses a single interval and a state variable to ensure smooth, predictable alternation between the two titles. Let me know if you need help integrating this with your update check code or have other requirements!