2

Buen día a todos, muchas gracias por su tiempo :)

Estoy "mejorando" un script en angular que dejó otro desarrollador en mi empleo, concretamente en un formulario de búsqueda, en donde tarda demasiado en encontrar el resultado por la cantidad de datos que están en caché.

Esto porque no tiene algún timeout que espere a que termine de escribir el usuario. El código original es el siguiente:

$scope.tomaAlumnos = function (search) {
    if ($scope.alumnos.length > 0) {
        var newSupes = $scope.alumnos.slice();
        if (search && newSupes.indexOf(search) === -1) {
            newSupes.unshift(search);
        }
        return newSupes;
    }
};

La idea es hacer algo que detenga el timeOut pero no logro hacer retornar el valor de la promesa. Con el siguiente código la consola arroja que no se está devolviendo un valor válido (Se espera un objeto con los resultados);

var timeOut = null;
    $scope.tomaAlumnos =  async function (search) {
        if ($scope.alumnos.length > 0) {
           var resolve = await function(){
               clearTimeout( timeOut );
               newSupes = [];
               timeOut = setTimeout(function(){
                   var TempNewSupes = $scope.alumnos.slice();
                   if (search && newSupes.indexOf(search) === -1) {
                       TempNewSupes.unshift(search);
                   }
                   newSupes = TempNewSupes;
               }, 300);
               return newSupes;
            }
            return resolve;
        }
    };

Y así llamar:

var alumnoResult = $scope.tomaAlumnos("Nombre del alumno");
console.log(alumnoResult);

¿Alguien sabrá como resolver esto?.

NOTA: En los ejemplos que he visto no se retorna un valor, siempre ejemplifican con un console.log() pero esto lo he visto colocado dentro del async, nunca en la llamada tal como lo coloqué yo. Por eso la duda.

4
  • si quieres que no busque hasta terminar de escribi agrega un boton o cambia el lenght > 2 asi requerira minimo 3 letras para empezar a buscar no obstante no entiendo porque el unshift en tu codigo o la logica para este condicional, te recomiendo colocar parte del codigo, data de ejemplo y resultado esperado. esto ayudara a la comunidad a darte un codigo mas optimo,rapido y eficiente para lo que deseas!
    – Bryro
    el 22 jun. 2020 a las 18:25
  • tal vez Promise.race, o angularjs $q.race te ayuden a setear un timeout: si la/s promesa/s del search terminan antes resuelven con resultados sino se resolverá la promesa con timeout el 22 jun. 2020 a las 18:32
  • Bryro, en mi caso no lo resolvería con un length porque si quisiera buscar un nombre con apellidos luego del tercer dígito igual habría demasiada lentitud en la búsqueda. Es necesario esperar a que termine de tipear para que haga la búsqueda. el 24 jun. 2020 a las 14:44
  • alo Malbarez, no estoy familiarizado. el 24 jun. 2020 a las 14:44

1 respuesta 1

0

El código está mal planteado. Fijate que el método tomaAlumnos que planteas está asignando una función a resolve, no el resultado de su ejecución.

El código con la forma correcta sería:

async function respuestaSO () {

  // no estoy usándolo con Angular, luego no tengo $scope.
  const alumnos = ['Pepe', 'Juan', 'Francisco'];

  const tomaAlumnos = async function (search) {
      if (alumnos.length > 0) {
         var resolve = await function(){
             var newSupes = alumnos.slice();
             if (search && newSupes.indexOf(search) === -1) {
                 newSupes.unshift(search);
             }
             return newSupes;
         }(); // Quieres el resultado de ejecutar la función, no guardar el cuerpo de la función.

         return resolve;

         /*
           Añadir () al final es equivalente a no añadirlo y quitar el await:
             var resolve = function(){
                 var newSupes = $scope.alumnos.slice();
                 if (search && newSupes.indexOf(search) === -1) {
                     newSupes.unshift(search);
                 }
                 return newSupes;
             };

           y llamar a la funcion:

              resolve();

           en cuyo caso deberías hacer:

              return resolve();

        */
      }
  };

  var alumnoResult = await tomaAlumnos("Nombre del alumno"); // Estás llamando a una función async la cual devuelve una promesa, no el resultado, para obtener el resultado de la promesa necesitas usar await.
  // Es por ello que toda la respuesta forma parte de una función async (respuestaSO)
  console.log(alumnoResult);

}

Sin embargo, el código sigue siendo un poco confuso, si quieres que quede más claro y sea mejor, puedes considerar refactorizarlo (recuerda sustituir lo que no lleve $scope):

async function respuestaSO(posicionDeseada) {
  // no estoy usándolo con Angular, luego no tengo $scope.
  const alumnos = ["Pepe", "Juan", "Francisco"];

  const tomaAlumnos = async function (search) {
    if (alumnos.length === 0 || !search) {
      return; // Claúsula de guarda
    } 

    // Asumo que esta búsqueda es asíncrona
    return new Promise((resolve, reject) => {
      let newSupes = alumnos.slice(0, posicionDeseada);
      /*
        Si no le pasas parámetros a slice, no estás cogiendo un trozo del array, lo estás cogiendo todo, tal vez de esa línea proviene la lentitud, sobretodo si el array tiene millones de registros.
     
        Si deseas obtener todo el array, pero no modificarlo directamente, busca sobre alumnos:
          
        let newSupes = alumnos;
      */

      if (newSupes.indexOf(search) === -1) {
        newSupes.unshift(search);
      }

      resolve(newSupes);
    });
  };

  let alumnoResult = await tomaAlumnos("Nombre del alumno"); // Estás llamando a una función async la cual devuelve una promesa, no el resultado, para obtener el resultado de la promesa necesitas usar await.
  // Es por ello que toda la respuesta forma parte de una función async (respuestaSO)
  console.log(alumnoResult);
}

2
  • Muchisimas gracias por tu respuesta. Mil disculpas, se que se tomó el tiempo para ayudar y responder, pero en el código de su ejemplo noté que no había un timeout y me dí cuenta que mi ejemplo tampoco lo tiene. Mi problema es que no logro usar timeout con el código que di como ejemplo. Por otro lado, me es imposible cambiar el $scope ya que es requisito tenerlo tal cual está. en donde puedo cambiar es en la llamada del mismo. el 24 jun. 2020 a las 14:56
  • Sólo he puesto la respuesta en función de código nativo en JavaScript, si sustituyes la variable por el scope que tú usas debería funcionar igual. El settimeout sólo lo uso para simular algo asíncrono ya que no dispongo del código que tú usas, es a modo de ejemplo. el 24 jun. 2020 a las 14:58

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.