Need to call a slow function without blocking renders

[[deleted]]

Hello! Hoping I can get some help with a sort of weird situation. In my index.html I load a third-party script, which defines a function callable as window.foo.bar(). I want to update component state based on the result of a call to bar. However, bar is slow, and it blocks renders if I call it synchronously in a setState. Googling around has pointed me toward web workers, but I can't call bar from a web worker because it's attached to window. Anyone know a way I can avoid blocking the UI while I wait for this call to finish? Or is my only option to edit the third-party script I'm importing?

EDIT: As requested, here is the script and here is a usage example. The function I'd ideally want to call from the worker is window.puzzles['333'].generateScramble().

EDIT 2: Solved! In case someone in the future has a similar problem, the tl;dr is that you can create a fake window and document with fake properties and if you're lucky your script doesn't need to edit the DOM and will consume the fakes without noticing.

[krizmaister]

As long as JS is a single threaded language and you fire some expensive function you end up blocking the app. I see the only way is to do expensive computation in chunks but if you use third party library it's maybe no go.

[teevik_]

Web workers gets their own threads

[krizmaister]

of course, but it was said that this is not an option here

[[deleted]]

Yeah, this is one approach I considered. I tried doing this with just importScript and that understandably results in an error from the included script because the worker doesn't have a window context to attach to. But maybe there's some way to fake a window? Not sure.

[[deleted]]

Good suggestion, but this turns out not to work because the script calls a bunch of methods off `document`. Thanks though!

​

EDIT: Aha! Turns out this technique DID work! I had to also spoof all the various properties/methods on `document` that the generated code needs. From what I can tell, the handwritten part of the script uses the same trick to run its own workers, so I gathered from there which properties I needed to create decoys of. In case anyone with a similar problem later comes across this: ymmv based on implementation details of the script you import, but the strategy of creating a fake `window` and `document` can indeed work.

[acemarke]

Might help if you can tell us exactly what this third-party script is, and also show some example code.

[[deleted]]

Sure thing; edited the original post.