'use strict'; const sum = num => { let acc = 0; while (num) { acc = acc + num; num = num - 1; } return acc; }; new Promise((res, reject) => { document.querySelector('body').style.backgroundColor = 'red'; res(); }).then(() => { const res = sum(1000000000); console.log(res); });Primero quiero cambiar el bgcolor a rojo y obtener el resultado de la función de suma.
Pero no está funcionando bien.
Después de recibir el resultado de la suma, cambie el color bg.
¿Lo que me faltaba?
Creo que el código está funcionando correctamente. Sin embargo, después de configurar el color de fondo, bloquea inmediatamente el procesador con un bucle extremadamente largo. El navegador no tiene tiempo de colorear el fondo antes de que se congele calculando la suma de 1 a mil millones. Si bien la propiedad del color de fondo se establecerá antes que la función, la nueva representación lleva una cantidad de tiempo distinta de cero.
Puede ver esto estableciendo un retraso antes de permitir que regrese la promesa. En este caso (o al menos en mi procesador de todos modos), el fondo se volverá rojo primero.
'use strict'; const sum = num => { let acc = 0; while (num) { acc = acc + num; num = num - 1; } return acc; }; new Promise((res, reject) => { document.querySelector('body').style.backgroundColor = 'red'; setTimeout(res, 250); }).then(() => { const res = sum(1000000000); console.log(res); });