Realmente no entiendo async. tengo una función como esta:
function getTeam() { let sir = setInterval(() => { const teamsGrid = $('[class*="teamsgrid"]').find("p"); const firstTeam = $(teamsGrid[0]).text(); if (firstTeam != '') { clearInterval(sir) return firstTeam.trim() } }, 100) }no soy maestro js. solo quiero obtener ese elemento cuando se carga, este código se ejecuta en un script de usuario y // @run-at document-idle tampoco ayuda. Sabía que tendría que entrar en async js promete devoluciones de llamada y lo que sea algún día, pero realmente no entiendo cómo funciona después de las páginas de documentos y otros stackoverflow. cuando consola.log esta función, se imprimirá indefinida una vez y luego, si tengo una consola.log dentro, imprimirá el nombre real del equipo. como espero ese resultado
Puede modificar su código a lo siguiente (pero no lo haga , vea más abajo, solo proporciono esto como sus etiquetas StackOverflow incluidas async/await ):
async function getTeam() { return new Promise(resolve => { const sir = setInterval(() => { const teamsGrid = $('[class*="teamsgrid"]').find("p"); const firstTeam = $(teamsGrid[0]).text(); if (firstTeam != '') { clearInterval(sir); resolve(firstTeam.trim()); } }, 100); }); } // ... and then anywhere else in your code: doSomethingSynchronous(); const team = await getTeam(); soSomethingSynchronousWithTeam(team);Tenga en cuenta que esto solo funcionará con navegadores modernos compatibles con >= ECMAScript 2017: https://caniuse.com/async-functions (¡pero afortunadamente eso es lo más por ahora!)
... realmente no debería esperar activamente un elemento porque esto es innecesariamente pesado para la CPU. Por lo general, tendrá algún tipo de evento que le informará tan pronto como se haya creado el elemento que está esperando. Solo escuche eso y luego ejecute su código.
Qué hacer, si actualmente no hay tal evento :
getTeam solo cuando algo haya cambiado en lugar de cada 100 ms (menor impacto en el rendimiento!)function getTeam() { let sir = new Promise((res, rej) => { const teamsGrid = $('[class*="teamsgrid"]').find("p"); const firstTeam = $(teamsGrid[0]).text(); if (firstTeam != '') { clearInterval(sir); res(firstTeam.trim()); } }); return sir(); }Por lo que entendí, estás buscando firstTeam . Además, asumimos que siempre hay firstTeam , por lo que no hay caso en el que no haya nombre de equipo. No estoy seguro de dónde está haciendo un requisito que llevará tiempo procesar honestamente desde este código. Hasta ahora parece que la función de sincronización debería funcionar bien. ¿Está llegando a alguna API?
Puede hacerlo asíncrono si lo desea, pero la parte principal será usar eventos en su lugar. Hay un objeto especial llamado observador de mutaciones. Llamará a una función que le des cada vez que haya un cambio en el elemento que estás observando.
Consulte los documentos del observador de mutaciones para comprender el código a continuación: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
Sin saber mucho sobre su HTML, puedo decir tanto como esto debería funcionar:
function getTeam() { const teamsGrid = $('[class*="teamsgrid"]').find("p"); const firstTeam = $(teamsGrid[0]).text(); if (firstTeam != '') { return firstTeam.trim() } } function getTeamWhenAvailable() { // returning a promise allows you to do "await" and get result when it is available return new Promise((resolve, reject) => { // furst try if element is available right now const teamText = getTeam(); if(teamText) { // resolve() "returns" the value to whoever is doing "await" resolve(teamText); // resolve does not terminate this function, we need to do that using return return; } // Mutation observer gives you list of stuff that changed, but we don't care, we just do our own thing const observer = new MutationObserver(()=>{ const teamText = getTeam(); if(teamText) { // stop observing observer.disconnect(); // resolve the value resolve(teamText); } }); observer.observe(document.body, { childList: true, subtree: true }; }) } // usage, the extra brackets around the lambda cause it to invoke immediatelly (async () => { console.log("Waitinf for team..."); const teamName = await getTeamWhenAvailable(); console.log("Result team name: ", teamName) })();Ahora es posible que desee reducir el alcance del observador de mutaciones, en el ejemplo anterior, observa todo el documento. En cambio, intente observar el elemento más profundo en el que puede confiar que no se eliminará.
Si necesita recibir el nombre del equipo varias veces, creo que debería ir solo con el obsever sin las cosas asíncronas.