I've run into a issue with jQuery becoming undefined in a for loop. I have found a solution, but I'm trying to understand why the issue occurs. Of course, I'm open to feedback on my programming style and choices. Anyway I digress...

Background

Working on a bookmarklet to automate a tedious task in a asset management system that's done in the browser. There are a million and one better ways that I would like to do this, but due to technical and political constrains, cannot.

The task being automated is long and has to be repeated numerous times so it must be non-blocking so the DOM can be updated with a progress bar.

Issue

The below code works fine for a single iteration. However, on the successive iteration, jQuery becomes undefined which causes the code to crash since jQuery is required in UI_ProgressBar.

After UI_Render completes, $ becomes undefined however I have no clue why this might be the case.

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();
    });
}

Interim Solution

Currently my interim solution is to use a temporary variable to hold jQuery but this is not ideal.

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

If you want to test the code, here is a raw extract that can be pasted into the developer console: https://pastebin.com/3Ajvcc7u