es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Una mejor manera de esperar a una función hasta el siguiente paso en JavaScript.

29 May, 2023 Programación

Estoy escribiendo un script de JavaScript basado en navegador para extraer el valor de entrada del usuario y proporcionar retroalimentación. Y en la página, tienes que hacer clic en diferentes áreas para que se muestre el elemento deseado. Estoy tratando de ver si hay manera de que JavaScript espere hasta que el elemento regrese antes de que comience a buscar el siguiente. En este momento solo uso setTimeout, pero tengo que hacer un bucle de todos los elementos que quiero obtener, lo que resulta en funciones anidadas desordenadas. Estoy tratando de ver si hay una solución más elegante. Solía programar VBA, así que no estoy tan familiarizado con las API web asincrónicas. Todavía estoy aprendiendo.

function a(){
document.getElementById('1').click()
setTimeout(function(){document.getElementById('1a');addmessage;b;}),5000}
}
function b(){
document.getElementById('2').click()
setTimeout(function(){document.getElementById('2a');addmessage;c;}),5000}
}
function c(){
document.getElementById('3').click()
setTimeout(function(){document.getElementById('3a');addmessage;d;}),5000}
}
function addmessage(){
//esta es la función que uso para agregar un elemento, realizar alguna operación y agregarlo a la caja de diálogo
}

etc..

lo que imaginé es algo así como lo siguiente

function addmessage(elemento_a_clickear, elemento_a_recoger){
// hacer clic en el elemento_a_clickear
// esperar 5 segundos
// recoger innertext de elemento_a_recoger
// realizar alguna operación, generar un mensaje
// agregar mensaje a la caja de diálogo
}

así que puedo hacer algo como

addmessage(1,1a)
addmessage(2,2a) <--- esto no se ejecutará hasta que el primero se complete.
Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para lograr esto, puedes usar async-await en tu función para esperar a que el elemento regrese antes de pasar al siguiente. Aquí tienes un ejemplo de cómo puedes modificar tu función para usar async-await:

    async function addmessage(elemento_a_hacer_clic, elemento_a_recolectar) {
  // hacer clic en elemento_a_hacer_clic
  document.getElementById(elemento_a_hacer_clic).click();

  // esperar a que elemento_a_recolectar esté disponible
  await waitForElement(elemento_a_recolectar);

  // recolectar el texto interno de elemento_a_recolectar
  const texto_recolectado = document.getElementById(elemento_a_recolectar).innerText;

  // realizar alguna operación, generar un mensaje
  const mensaje = algunaOperacion(texto_recolectado);

  // agregar el mensaje al cuadro de diálogo
  addToDialogBox(mensaje);
}

function waitForElement(elemento_id) {
  return new Promise(resolve => {
    const intervalo = setInterval(() => {
      const elemento = document.getElementById(elemento_id);
      if (elemento) {
        clearInterval(intervalo);
        resolve();
      }
    }, 100);
  });
}

    En esta función actualizada, waitForElement es una función auxiliar que devuelve una promesa que se resuelve cuando el elemento está disponible en el DOM. La función principal addmessage usa await para esperar a que esta promesa se resuelva antes de recolectar el innerText del elemento y generar un mensaje.

    Luego puedes llamar addmessage con los IDs de elemento deseados como argumentos, y se ejecutarán secuencialmente, siendo cada llamada esperando a que la anterior se complete antes de pasar a la siguiente.

Comments are closed.