In this very last example, called ch03_clearmessages, we make a mechanism to clear the actual message in the message bar after 10 seconds. For some applications, this is an absolutely useless feature, but for others, especially those with a less frequent notification output, this can come in handy. One way to achieve this is by manually removing the actual message after 10 seconds every time we create an output. However, there must be a more optimal and convenient way to do this. As we know that we cannot listen to change events on DOM elements without values and text contents are special DOM nodes, we will use the Mutation Observer API.
To achieve our new goal, we extend our layerTree constructor function:
var layerTree = function (options) {
[…]
var observer = new MutationObserver(function (mutations) {
if (mutations[0].target.textContent) {
var oldText = mutations[0].target.textContent;
var timeoutFunction ...