How do I avoid setTimeout =)

[metaleap]

Hiya again, Van gang,

I have some custom "onDataRefreshed(newData)" function where I first do various state updates by setting .vals, then immediately afterwards do a "manual" (non-vanJS) further data->UI sync logic afterwards. (Basically stuff that isn't in van.States but just in the incoming newData.)

Those latter non-state data2ui syncs depend on the former van.State.val assignments but at that point, they aren't there yet or rather, their resulting state-dependent UI rerenderings aren't in the DOM just yet.

If I put that latter "manual" (non-van) portion of my data2ui syncing into a setTimeout(..., 123) it all works as I expected & need it to.

But that's ugly and indicative of me missing something. But there also isn't some van.onNextRenderDone(f) helper in the lib afaict. (Me mixing van's ways of binding with non-van manual dom manipulations might be to blame here, but just for learning, what's to be kept in mind when such a mix is present or even unavoidable? Unless it's outright "unsupported" of course =)

[Tao-VanJS]

For this use case, my suggestion would be just using setTimeout. In VanJS, DOM elements are updated right after state changes with setTimeout(...) where the delay is implicitly 0. Thus technically any setTimeout calls with greater than 0 delay would just work. We are leveraging this technique in several occasions in VanJS's sample code. For instance:

• https://vanjs.org/demo#table-viewer: waiting for the content <textarea> element to be updated before adjusting its size.
• https://vanjs.org/demo#json-inspector: similar technique for the <textarea> element.
• https://vanjs.org/demo#jupyter-like-javascript-console: leveraging setTimeout(...) to integrate with Google Charts, and scroll the new input element into the viewport right after it's added.
• https://vanjs.org/tutorial#state-typed-child: use user-defined sleep function (which calls setTimeout(...) internally) to call alert(...) right after DOM updates are propagated.
• convert.ts#L83: Syntax highlight the code (via Prism) after it's generated.