Detecting DOM changes
Recently, I have come across situations where I need to detect elements being added to the DOM and trigger some other function.
For example, I was working on combining the lightbox plugin with a Jquery iviewer plugin. The problem is the lightbox plugin creates various elements and the zoom plugin can work only after all the elements created by lightbox have been loaded. I used setTimeout
initially, but that created race conditions.
In another situations I had to wait for a third party server response and DOM nodes being added before my code was executed.
To tackle these kind of situations I came up with a small polling function that would wait for the element to be created before doing something else. Without any more delay I present the idea implemented below:
var limit = 1000,
iter = 0,
timeout = 100,
wnw = function () {
if (iter > limit) {
return false;
}
if ($(element).length > 0) {
//do something
return true;
}
else {
setTimeout(wnw, timeout);
}
iter += 1;
};
The function once executed calls itself at regular intervals(timeout
) before checking if the element exits and doing the needful. If the functions has been called more than a specified number of times(limit
) it simply exits deciding that the element would never be created.
This can also be extended to detect element removal. Of course, I suggest wrapping all this code in a module before using it.