Understanding pyscript - javascript events order

Technical Topics PyScript
1

I’ve got a very simple use case that it’s becoming more complex than what I expected.

Basically I have to bind a select (html) change event to my pyscript script. However, for UX, I want to show a loader once select change event is triggered and remove it once it is all done. Well, that’s becoming quite of a challenge.

what I’ve tried so far;

  1. Pure pyscript → I’ve creted my html loader (hidden) and tried to access it in pyscript (through js document) and update its className and upate it accordingly to my css style for the loader. Basically using display=“block/none”. Nothing happened (still not sure why)

  2. js + pyscript → I’ve created my logic in js, so that the select onchange event would show the loader and I register a timeout to check every second if a specific div (the one with conent) has new content. This somehow works, but not as expected. It seems pyscript triggers first the change event, so all the computation is done, after the computation, the loader appears, just straight after, the new data is rendered and the timeout removes the loader. Therefore, UX-wise, it is still insufficient…

I am wondering if I am overcomplicating, or if there is any resource to understand better the event lifecycle between javascript/pyscript.

Thanks in advance!

1 Like
2

nice to meet you.

Pure pyscript → I’ve creted my html loader (hidden) and tried to access it in pyscript (through js document) and update its className and upate it accordingly to my css style for the loader. Basically using display=“block/none”. Nothing happened (still not sure why)

The reason why nothing happens is that you have selected hidden. In this case, it will spread to the entire pyscript and the result will not be displayed.

js + pyscript → I’ve created my logic in js, so that the select onchange event would show the loader and I register a timeout to check every second if a specific div (the one with conent) has new content. This somehow works, but not as expected. It seems pyscript triggers first the change event, so all the computation is done, after the computation, the loader appears, just straight after, the new data is rendered and the timeout removes the loader. Therefore, UX-wise, it is still insufficient…

In this case, the cause is the difference between the execution timing of js and the execution timing of pyscript. For example, if it takes 100ms to process the js event and 300ms to process the pyscirpt, the result will be dropped once every three times in parallel.

Therefore, we have to consider and program parallel processing, which is a very difficult problem. It’s a good idea to measure the time it takes to execute each script and store the results in some way.

Then, review the calculation result, for example, after the JS processing is completed, execute pyscript (of course, the opposite is also possible …). You need to choose an algorithm such as.

In other words, I think you have to think about processing such as moving to the next processing after the processing of either script is completed.

Regards, you.
ktsh.tanaka.2020

3

Which DOM API events are you capturing? Show the code that you are using.

Based on your description you can do everything in Python. Just make sure you are using a proxy for the Python functions that you attach to the DOM event.

1 Like