Probablemente sea una posibilidad remota, sin embargo, necesito solucionarlo de alguna manera, si tiene otros consejos que podrían ayudarme a lograr el mismo resultado final, ¡hágamelo saber!
tengo un con un montón de artículos con identificaciones únicas. Estos elementos se actualizan continuamente a través de una aplicación Cefsharp (cada 1000 ms). Actualmente tengo una clase llamada " show " que cambia el elemento de la lista desde la altura 0 a una altura específica en 1 segundo. Lo mismo ocurre cuando se elimina el elemento (el programa se elimina de las clases). Así que todo aquí funciona según lo previsto.
Sin embargo, por alguna razón, de vez en cuando, la animación de mi lista parecía cancelarse abruptamente. No pude entender por qué. Hace solo unos minutos me di cuenta de que era mi función sortList :
function sortList() { $("#orderQueueList li").sort(function (a, b) { return parseInt($(a).data('indexn')) - parseInt($(b).data('indexn')); }).appendTo('#orderQueueList'); }Esta función se ejecuta cada vez que se agrega un nuevo elemento a la lista o un elemento actual tiene su valor "indexn" actualizado. Entonces, si la animación está en cola (la animación tiene un tiempo de espera establecido de 5 segundos) y la lista se ordena durante este tiempo, o durante la animación real, se cancela.
Realmente no he sido capaz de averiguar cómo resolver esto. Mi pensamiento inicial fue que sortList esperaría hasta que se completaran todas las animaciones. Sin embargo, las animaciones tienen un lado .CSS, por lo que no estoy seguro de si esto es posible. He estado buscando en Google un poco y realmente no puedo encontrar una respuesta.
Quiero que la demora de 5 segundos se ejecute de inmediato (para que la animación se complete) o que la función sortList espere hasta que se complete la animación. ¿Es esto posible de alguna manera a través de JavaScript/jQuery?
¡Gracias!
Puede agregar otro parámetro a la función animada que activa una función una vez que ha terminado jquery doc explicando que aquí (5000) es la duración) Tenga en cuenta que la función se llama una vez por elementos coincidentes
$( "#clickme" ).click(() => { $( "#whatever" ).animate({ left: "+=50", }, 5000, () => { // <--- other parameter is here // Animation complete. }); });