B4J Question [BananoVuetifyAD3] long calculation and browser window goes white

[Christian75]

Hi,

I do a long calculation for some data, takes like 10 minutes and then the browser window goes white after like three to four minutes.
It comes back after the calculation and the for loops are done but is there a way to avoid the white window?
Also I added a progress circle that should update during these for loops but i does not it just animates as it is indeterminate until the in the last second when everything is calculated and the window goes back to normal then the progress i show as 100%.
Is there a way to refresh vuetify and rerender the window with a command?
I think I can speedup the calculation with some caches and stuff but that I would like to do later and just make this work first.

And the calculation is started with a click of a button.
Or can I do some sort of a background call in this case?
But I do not want the user to be able to do anything on the webpage as long as the calculation is ongoing.

/Christian

 

[Mashiane]

In your for loop, try and add a second counter, for example, it can count to 100, then in each cycle it updates the progress, with the % complete of the master loop and you set it back to 0.

Or rather use the page loader, which you can show and hide on demand.

 

[Christian75]

The problem is that I have nested loops, but after a lot of searching around Javascript then I understand that when a loop or something else take too long time then the render will be blocked due to Javascript beeing synchronous and only one threaded.
I found out that it should work with BANano.Window.setTimeout() and do recursive calls to the method, but it does not work, not for me anyway. All calculations are done correct but DOM or render will not happen even with the loop separated to recursive calls.
I also mange to make the loop method to be async but it did not make any differance.
I also tried to use BANano.Window.RequestAnimationFrame but I guess when the method take longer than 16ms then it will fail to render the window anyway even when using the requestanimationframe.
In these loops I do some reading of things in the webpage and I will try to change that because I think it is those readings that take a lot of time.
When setTimeout is used still one loop takes between 1-15 second which seems to be to much and the rendering of the screen will not happen.
I also add these calculated data in to VueTable which in the end will have 45000 rows as maximum, maybe that is too many rows for the VueTable also I do not know.
I guess a backgroundworker would be an option but then I need to remove the reading of the webpage for sure.

Sorry for a long post and a lot of questions but I think I will manage to solve this in the end with the removed reading of the page.
But I really thought that setTimeout should have sorted the rendering of the window.

 

[Christian75]

I actually got it to work if I change the generated Javascript file!
If I use B4j code:

BANano.Window.setTimeout(myFunction, 50)

Then it is converted to:

window.setTimeout(_B.myFunction(_B), 50)

and according to this page:
https://www.w3schools.com/js/js_asynchronous.asp
You shall not use the parenthesis for myFunction when using setTimeout().

If I change the Javacode to this:

window.setTimeout(_B.myFunction, 50)

Then it works and updates the progress circle as it should!

@alwaysbusy is there a way to not have the parenthesis added in the transpiler?

Best regards
Christian

 

[Christian75]

I added this workaround which works for now:

#if JavaScript
        window.setTimeout(_B.myfunction, 50);
#End If

 

[alwaysbusy]

@alwaysbusy is there a way to not have the parenthesis added in the transpiler?

I will have to investigate this further as _B has a special meaning in BANano.

 

[alwaysbusy]

Will be fixed in the next version

 

[Christian75]

Will be fixed in the next version

Ok thanks!