Me encontré con un problema con jQuery que se vuelve indefinido en un bucle for. He encontrado una solución, pero estoy tratando de entender por qué ocurre el problema. Por supuesto, estoy abierto a recibir comentarios sobre mi estilo de programación y mis elecciones. De todos modos estoy divagando...

Fondo

Trabajando en un bookmarklet para automatizar una tarea tediosa en un sistema de administración de activos que se realiza en el navegador. Hay un millón y una formas mejores en las que me gustaría hacer esto, pero debido a limitaciones técnicas y políticas, no puedo.

La tarea que se está automatizando es larga y debe repetirse varias veces, por lo que no debe bloquearse para que el DOM pueda actualizarse con una barra de progreso.

Tema

El siguiente código funciona bien para una sola iteración. Sin embargo, en la iteración sucesiva, jQuery se vuelve indefinido, lo que hace que el código se bloquee, ya que se requiere jQuery en UI_ProgressBar.

Después de que se completa UI_Render, $ se vuelve indefinido; sin embargo , no tengo idea de por qué este podría ser el caso.

 async function UI_Render() { return new Promise(resolve => setTimeout(resolve, 10)); } //i = [0,100] is for the example. for(let i = 0; i <= 100; i++) { await DoStuff(i); await UI_ProgressBar(i).then(async function () { await UI_Render(); }); }

Solución interina

Actualmente, mi solución provisional es usar una variable temporal para contener jQuery, pero esto no es lo ideal.

 async function UI_Render(){ let v = $; var p = new Promise(resolve => setTimeout(resolve, 10)); $ = v; return p; }

Si desea probar el código, aquí hay un extracto sin procesar que se puede pegar en la consola del desarrollador: https://pastebin.com/3Ajvcc7u