The title tag is often what will be displayed in a link to the page in a search engine result page, so it is important to think in terms of the actually written content of the title tag. It also goes without saying that the title tag is a great resource to inform a user to something that is going on when it is not just a static page we are talking about, but a single page application of some kind. If it is a messaging app of some kind the title tag can be used to inform a user that they have a new message even when the tag is inactive. If it is a game that has money as a resource that value can be displayed in the title tag for example also.
Here is another basic example of using the document title method where I am using the set time out method to create a very simple app loop. This way I am not just updating the title text once, but over and over again in the body of this function that is being called at a rate given as the second argument when calling the set time out method.
However it would seem that there is a problem, when I click on another tab in the browser the rate at which the text updates seems to slow down to just about one per second. So in the more advanced sections of this post I will be looking into what the deal is with that a bot more.
When using setTimeout as a way to go about updating the text that is displayed in a title tag, the time at which frames will run can change depending on the browser. For example if I set 33 milliseconds as the desired target time at which the next call to my loop will run, I often get a time around that much if the tag is active and I am not doing much of anything in the function call. However if I change tabs the time between calls will increase to 1000 milliseconds regardless of what value I set.
For example something like this:
Will update the title text to the amount of time between function calls, as expected it will give me around 33ms if the window is active, but will increase to a second if the window is inactive.
So one thing that comes to mind when it comes to editing the title tag text is to have scrolling text. This is a feature that I find happening now and then in pages. Wiping something like that up just takes a little work with a basic app loop, and the use of the substring String prototype method. It might be a good idea to go with date objects as a way to change the letter index value thought rather than just stepping the index value each time the app loop is called.
There are some tweaks and additional changes that I might make to something like this, but the basic idea is there.
It might also be worth mentioning that the visibility change event can be used as a way to check if a user has switched tabs or not. This can then be used as a way to change what the text of a title tag should be depending if a user is actually looking at the page or not. This visibility change event can be attached by way of the add event listener method that is called off of the document object. I then just need to use the string \”visibilitychange\” for the event type, and then pass the function that I want to call each time the event happens. Another useful document propriety to use with this would be the document visibility state property that will contain a string value for the current visibility state of the page.
This might be just a basic example, but in a real project a static text title can be set when the user has the page active in the browser, and a title that reflects the current status of an application can be set as the title when the page is not active.