Menu
I'm working with a proxy object where I detect a object value change and then load new content via AJAX, I use a setInterval function to wait until a the element that comes in the AJAX request exist and then execute a piece of code. I'm doing in this way because my case requires it. I made a short snippet example:
var handler = {
makeThings: 0,
otherStuff: 0
};
var globalHandler = new Proxy(handler, {
set: function(obj, prop, value) {
obj[prop] = value
if (prop == "makeThings") {
var clearTimeSearchProxy = setInterval(function() {
if ($("p").length) {
console.log("The element finally exist and we execute code");
clearTimeout(clearTimeSearchProxy);
}
}, 100);
}
return true;
}
});
$(document).ready(function() {
$("button").on("click", function() {
globalHandler.makeThings = 1;
//This element comes with ajax but I use a setTimeout for this example
setTimeout(function() {
$("#newContent").append("<p>Ajax element</p>");
}, 2000);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button>New content</button>
<div id="newContent"></div>
</body>Now I'm wondering about how to improve the code in a cleaner, efficient and elegant way. I was thinking of using promises instead of setInterval to execute a code when the element that comes via AJAX exists in the DOM.
How can I make it work? Should I use other JavaScript functionality for this case instead of promises? I'm stuck with the promise to achieve what I need, this what I have tried so far.
var handler = {
makeThings: 0,
otherStuff: 0
};
var globalHandler = new Proxy(handler, {
set: function(obj, prop, value) {
obj[prop] = value
if (prop == "makeThings") {
var myFirstPromise = new Promise((resolve, reject) => {
if ($("p").length) {
resolve("Exist");
} else {
reject("It doesnt exist.");
}
});
myFirstPromise.then((data) => {
console.log("Done " + data);
}).catch((reason) => {
console.log("Handle rejected promise: " + reason);
});
}
return true;
}
});
$(document).ready(function() {
$("button").on("click", function() {
globalHandler.makeThings = 1;
//This element comes with ajax but I use a setTimeout for this example
setTimeout(function() {
$("#newContent").append("<p>Ajax element</p>");
}, 2000);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button>New content</button>
<div id="newContent"></div>
</body>
515
Do not wait. Rather subscribe for notification of a change in the target element.
The API to utilise for listening to changes in the DOM tree is the MutationObserver.
The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature which was part of the DOM3 Events specification.
Use it to observe change in an element as follows:
// You selected `$("p")` in your snippet, suggesting you're watching for the inclusion of 'any' `p` element.
// Therefore we'll watch the `body` element in this example
const targetNode = document.body;
// Options for the observer (which mutations to observe)
const config = {
attributes: false,
characterData: false,
childList: true,
subtree: true
};
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
for(let mutation of mutationsList) {
if ( mutation.type === "childList" ) {
continue;
}
const addedNodes = Array.from( mutation.addedNodes) ;
if ( addedNodes && addedNodes.some( node => node.nodeName === "P" ) ) {
observer.disconnect();
console.log("The element finally exist and we execute code");
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
