Tengo una función para saber a qué hora y días exactos trabaja un empleado.
Esa función devuelve un valor que se usa en un selector de fechas. Como dije, solo quiero mostrar las "horas de trabajo", así que tuve que deshabilitar las horas "no laborables".
var invalid_a = [ "2021-03-17T13:00:00.000Z", "2021-03-17T13:00:00.000Z", "2021-03-17T13:00:00.000Z", "2021-03-17T13:00:00.000Z", "2021-03-17T13:00:00.000Z", "2021-03-17T13:00:00.000Z" ]; var invalid_b = [ "2021-03-17T22:00:00.000Z", "2021-03-17T22:00:00.000Z", "2021-03-17T22:00:00.000Z", "2021-03-17T22:00:00.000Z", "2021-03-17T22:00:00.000Z", "2021-03-17T22:00:00.000Z" ]; var days_list = [ "MO", "WE", "TH", "TU", "FR", "SA" ]; var comb = invalid_a.map(function combineTitleData(dataItem, index) { let y = new Date(dataItem); let mins = y.getMinutes() + 59; return { start: '00:00', end: '' + y.getHours() - 1 + ':' + '' + mins + '', recurring: { repeat: 'weekly', weekDays: days_list.toString() } }; }); var comb2 = invalid_b.map(function combineTitleData(dataItem, index) { return { start: '' + new Date(dataItem).getHours() + ':' + '01', end: '23:59', recurring: { repeat: 'weekly', weekDays: days_list.toString() } }; }) console.log(comb); console.log(comb2);Cuando pruebo que esto funciona bien, algunos usuarios (un par de ellos) informaron que el navegador se congela cuando se ejecuta esta función, aparece una ventana emergente con: "La página no responde": puede esperar a que responda o salir de la página.
Sé que esta es la función que causa esto porque cuando deshabilité este código en la página y lo intenté nuevamente, todo funcionaba bien.
¿Por qué esta función está causando esto en algunos navegadores/clientes? ¿Hay alguna forma diferente de mapear las fechas con mi salida esperada que no cause errores en el navegador?
Gracias.
Al igual que la respuesta de @ArkyAsmal , le aconsejo que use trabajadores web o, más fácilmente, si su matriz se compone de millones de entradas, simplemente agregue un poco de tiempo de espera para vaciar el subproceso de la interfaz de usuario cada ~ 10k iteraciones:
map en un bucle forawait new Promise(res => setTimeout(res, 5)) si i% 1E5 === 0Esto parece ser un problema de rendimiento. La complejidad del tiempo es O(n), pero si contienen miles de puntos de datos, es un mal momento.
Javascript es un lenguaje de un solo subproceso, por lo que si hay muchos empleados/puntos de datos para calcular, el navegador esperará hasta completar este análisis de datos completo, antes de hacer cualquier otra cosa (es decir, cualquier clic en botones, enlaces, etc.).
Esto puede bloquear la interfaz de usuario si hay muchos puntos de datos, lo que hace que la página no responda.
Este es en realidad un gran candidato para la programación javascript asíncrona.
Soluciones:
Use web.worker api para usar subprocesos de CPU adicionales para hacer este cálculo. De forma predeterminada, esto hace que estas funciones sean asíncronas.
Convierta estas funciones en promesas de JavaScript, lo que permite que la interfaz de usuario aún responda, porque los cálculos de la función se descargan.
Aquí hay un buen recurso si desea consultar: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise