Change document title every x seconds in JavaScript

Question

I want to change the title of my HTML page every second with JavaScript.

First the title will be "Hold on.", after one second it will be "Hold on.." and then after one second "Hold on...". After that it has to loop the same thing over and over again

I already tried this but that didn't work:

setTimeout(() => { document.title = "Hold on."; }, 1000);
setTimeout(() => { document.title = "Hold on.."; }, 1000);
setTimeout(() => { document.title = "Hold on..."; }, 1000);

I hope you can help me.

score 6 · Accepted Answer · answered Mar 14 '20 at 16:13

6

setTimeout sets a timeout, not an interval. It means it will run only once. To set intervals you'll have to use setInterval.

let dots = 1;
setInterval(() => {
    document.title = "Hold on" + ".".repeat(dots);
    dots++;
    if (dots > 3) dots = 1;
}, 1000);

answered Mar 14 '20 at 16:13

sit

360
3
9

This is the easiest code for me (that works), that's why I accepted your response as the answer. Thanks! – Mar 14 '20 at 16:22

Mike · Answer 2 · 2020-03-14T17:01:13.423

Using setTimeout

setTimeout adds the event to the stack. And your example will try to call each immediately after 1s. So, you'd need to self-manage the intended execution time:

setTimeout(() => { document.title = "Hold on."; }, 1000);
setTimeout(() => { document.title = "Hold on.."; }, 2000);  // <-- increase
setTimeout(() => { document.title = "Hold on..."; }, 3000); // <-- increase

Looping setTimeout

If setTimeout is desired (for whichever reason), it is better to recursively call a function and embed that within the timeout function. This is demonstrated below:

let time = 0;
loop(time);

function loop(time){
  setTimeout(() => { 
    message.textContent = "Hold on" + '.'.repeat(time%3+1); 
    loop(time+=1000)        // <-- recursive call that also increments time
  }, 1000);
}

<div id="message"></div>

Using setInterval

setInterval alleviates some of the time management issues, especially if execution needs to occur in a regular sequence. Below demonstrates a continual loop interval.

let period_count = 0;
setInterval(function() {
  let message = 'Hold on' + '.'.repeat( period_count++%4 );
  document.querySelector('#message').textContent = message;
}, 1000);

<div id="message"></div>

Halting Execution

One difference between setInterval and setTimeout is that interval will continue to execute until it is stop. Below demonstrates how it might be stopped from w/in the loop body:

let period_count = 1;
let interval = setInterval(function() {
  if ((period_count) == 3)
    clearInterval(interval)

  let message = 'Hold on' + '.'.repeat(period_count++);
  document.querySelector('#message').textContent = message;
}, 1000);

<div id="message"></div>

*After that it has to loop the same thing over and over again* - did you read this part? — Anurag Srivastava, Mar 14 '20 at 16:24
@AnuragSrivastava changes made and comments removed -- thank you for bringing that to my attention — Mike, Mar 14 '20 at 16:32

score 0 · Answer 3 · answered Mar 14 '20 at 16:12

0

You could use recursive function to achieve this.

let dots = 0;
function holdOn() {
  setTimeout(() => { 
    document.title = "Hold on" + (".".repeat(dots++)); 
    if(dots > 3)  dots = 0;
    holdOn();
  }, 1000);
}
holdOn();

answered Mar 14 '20 at 16:12

Sohail Ashraf

10,078
2
26
42

score 0 · Answer 4 · answered Mar 14 '20 at 16:13

0

I would do it like this, to have it execute immediately:

var i = 0;
(function loop() {
  // Just for the demo
  document.body.innerHTML = "Hold on" + '.'.repeat(i+1);
  i = ++i % 3;
  setTimeout(loop, 1000);
})();

answered Mar 14 '20 at 16:13

blex

24,941
5
39
72

score 0 · Answer 5 · answered Mar 14 '20 at 16:15

0

use setInterval.

const titles = ["Hold on.", "Hold on..", "Hold on..."];
let i = 0;

setInterval(() => {
    i = i % 3;
    document.title = titles[i];
    i++;
}, 1000);

answered Mar 14 '20 at 16:15

random

7,756
3
19
25

Change document title every x seconds in JavaScript

5 Answers5

Using setTimeout

Looping setTimeout

Using setInterval

Halting Execution