-
-
Save djmunro/1c3e1f9dc0f888129cbe9d9d79a113b2 to your computer and use it in GitHub Desktop.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Document</title> | |
| <script | |
| src="https://code.jquery.com/jquery-3.5.0.min.js" | |
| integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" | |
| crossorigin="anonymous" | |
| ></script> | |
| </head> | |
| <body> | |
| <h1 class="title">Wait for element demo</h1> | |
| <button class="button">Click Me!</button> | |
| </body> | |
| <script> | |
| const handleClick = () => { | |
| const title = document.querySelector(".title"); | |
| title.classList.add("foo"); | |
| }; | |
| const button = document.querySelector(".button"); | |
| button.onclick = handleClick; | |
| const waitForEl = (selector, callback, attempts = 20) => { | |
| if ($(selector).length) { | |
| callback(); | |
| } else { | |
| if (attempts > 0) { | |
| attempts--; | |
| setTimeout(function () { | |
| waitForEl(selector, callback, attempts); | |
| }, 1000); | |
| } | |
| } | |
| console.log(`Unable to find selector: ${selector}`); | |
| }; | |
| waitForEl(".foo", () => { | |
| console.log("It worked"); | |
| }); | |
| </script> | |
| </html> |
Going to test it out...
🔥
Going to test it out...
I made a V2 of this... that's a bit simpler, I had emailed it to you.
const waitFor = (selector, timeout = 2000) => {
return new Promise((resolve, reject) => {
const interval = setInterval(() => {
if (document.querySelector(selector)) {
clearInterval(interval);
clearTimeout(timeoutRef);
resolve();
}
}, 30);
const timeoutRef = setTimeout(() => {
clearInterval(interval);
reject();
}, timeout);
});
};
await waitFor(".dropdown-item");
So, if I put foo directly in it logs that it works, then logs it didn't find it, then stops.
Does this mean that is runs a final time after it works?
So, if I put foo directly in it logs that it works, then logs it didn't find it, then stops.
Does this mean that is runs a final time after it works?
can you post the code that you're talking about? with your added logging?
I was talking about the first version. I put foo directly in and took the click code out:
`
<title>Document</title> <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous" ></script>Wait for element demo
Click Me! <script>const waitForEl = (selector, callback, attempts = 20) => {
if ($(selector).length) {
callback();
} else {
if (attempts > 0) {
attempts--;
setTimeout(function () {
waitForEl(selector, callback, attempts);
}, 1000);
}
}
console.log(`Unable to find selector: ${selector}`);
};
waitForEl(".foo", () => {
console.log("It worked");
});
`
I was talking about the first version. I put foo directly in and took the click code out:
`
<title>Document</title> <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous" ></script> # Wait for element demo Click Me! <script> ``` const waitForEl = (selector, callback, attempts = 20) => { if ($(selector).length) { callback(); } else { if (attempts > 0) { attempts--; setTimeout(function () { waitForEl(selector, callback, attempts); }, 1000); } } console.log(`Unable to find selector: ${selector}`); };waitForEl(".foo", () => {
console.log("It worked");
});</script> `
If you don't mind, could you try the second version? That first one was a copy-pasta off the internet
The second version is giving me a "Uncaught SyntaxError: await is only valid in async function" error in the console...
Going to test it out...