2 useful Polling functions in JavaScript
Sometimes we need to wait for something to be happened in a webpage or web application before we execute a code or call a function or do something else.
By something I mean:
- rendering of a HTML element
- a JavaScript event
- response from API
and many other things.
Let's see how to write a couple of functions to tackle these scenarios:
Poling function 1: wait for HTML element
var waitForElement = function(elem) {
if (typeof elem == 'string') {
return new Promise(function (resolve) {
var wfelem = function () {
if (null != document.querySelector(elem)) {
resolve(document.querySelector(elem));
} else {
window.requestAnimationFrame(wfelem);
}
};
wfelem();
});
}
};
We can use the above poling function when we need to wait for a certain HTML element.
Example:
waitForElement('button#addToCart').then(function(button) {
button.textContent = 'Buy Now';
});
Poling function 2: wait until a function returns true
var waitUntil = function(callback) {
if (typeof callback === 'function') {
return new Promise(function(resolve, reject) {
var tick = setInterval(function() {
if (callback() === true) {
clearInterval(tick);
return resolve();
}
});
});
} else {
console.error(callback + ' should be a function');
}
};
We can use the above function to wait until one or more conditions meet the criteria before further execution of the code.
Example:
window.waitUntil(function () {
return "complete" == document.readyState;
}).then(function () {
console.log("Page loading complete!");
});