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.

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.

• javascript
• html
• title
• page-title

• 2 use setInterval – Mike Commented Mar 14, 2020 at 16:08

5 Answers 5

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

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>

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

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

use setInterval.

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

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