El siguiente fragmento de código congela la animación CSS hasta que finaliza. No puedo entender por qué. Intenté promesas, espera asíncrona, setTimeout, nada cambió. Quiero tener una animación de carga agradable y simple para mostrar en el navegador mientras el siguiente fragmento de código hace su trabajo detrás de escena. Pero congela mi animación. ¿Qué tengo que hacer?
sortedByFrequency es un objeto que contiene una gran cantidad de propiedades de palabras que tienen valores de dígitos. Los siguientes métodos ordenan las propiedades dentro del valor más alto del objeto)
const sortedByFrequency = Object.entries(dictionary) .sort(([, v1], [, v2]) => v2 - v1) .reduce((obj, [k, v]) => ({ ...obj, [k]: v }), {})Para cálculos de javascript "pesados" en el navegador, se recomienda utilizar un trabajador web . Se ejecuta en su propio proceso (es por eso que necesita su propio archivo js). Te comunicas con él de forma asincrónica, y realmente no hay mucho más aparte de eso.
mi-trabajador.js
onmessage = function(e) { console.log('Worker: Message received from main script'); var dictionary = e.data; const sortedByFrequency = Object.entries(dictionary) .sort(([, v1], [, v2]) => v2 - v1) .reduce((obj, [k, v]) => ({ ...obj, [k]: v }), {}) console.log('Worker: Posting message back to main script'); postMessage(sortedByFrequency); }principal.js
var myWorker = new Worker("my-worker.js"); var dictionary = {a: 2, b: 3} myWorker.postMessage(dictionary); console.log('Message posted to worker'); myWorker.onmessage = function(e) { var sortedByFrequency = e.data; console.log('Message received from worker', sortedByFrequency); }Buena suerte.