'How do I regularly update the UI while performing an asynchronic task?

Let's say I'm reading a very large file like so (or perform another task that takes a long time and continuously updates an object):

let myParsedObject = { };

const loadFile = async (filepath, filename) => {
    const rl = readline.createInterface({
        input: fs.createReadStream(path.join(filepath, filename)),
        crlfDelay: Infinity
    });

    rl.on('line', (line) => { parseLineToObject(line) });
}

Is there a way to update the UI (electron in my case, but the same should apply to HTML) at regular intervals (e.g. 500ms), so I can track the progress? I know there is setInterval, but I can't figure out how to make it work.

In C++ I have to worry about the object being updated while writing to it, how should I deal with it in Javascript?

All I can think of is calling the update function every x operations, but that seems very arbitrary and can vary quite a lot.

Thank you in advance!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source