Deferred in click event with jquery for ui render - promise

Question

I have this code:
$("input#drawAllRoutes").click(function (e) {
console.log("drawAllRoutes: Start Drawing");
showWaitPanel();
...
//foreach routeElement add vector layer on map
...
console.log("drawAllRoutes: Ok ");
hideWaitPanel();
})
I would have this behavior:
show wait panel adding the correct class in a div: this is done by showWaitPanel();
after that I add an high number of vector layer in openlayers3 map
when done, the wait panel is set hide with hideWaitPanel() that remove a class from a div
The problem is that with this code, the UI is not rendered because the vectors drawing require more resources and so freeze the UI.
So I don't see the wait panel, and the UI is freezed until the vector layers are drawed on the map.
How can I render the wait panel before the drawings?
I have read about deferred method, but I don't know very well it.
Thanks for any support.

Answer 1

You probably just need to force each stage into a different event thread, which can be achieved in a couple of ways.
Using window.setTimeout()
This is simple and should work despite being syntactically ugly.
$("input#drawAllRoutes").click(function (e) {
console.log("drawAllRoutes: Start Drawing");
showWaitPanel(); // assumed to be synchronous.
window.setTimeout(function() {
...
//foreach routeElement add vector layer on map
...
hideWaitPanel(); // ok in same event thread unless vector rendering is itself asynchronous.
console.log("drawAllRoutes: Ok");
}, 0); // even with a timeout of zero seconds, the passed function will execute in a later event thread.
});
Using a promise
The nett effect here should be very similar to using setTimeout(), but it will work only if showWaitPanel() returns a promise, otherwise showWaitPanel().then() will throw an error. So you would need to amend your showWaitPanel() function.
$("input#drawAllRoutes").click(function (e) {
console.log("drawAllRoutes: Start Drawing");
showWaitPanel().then(function() {
...
//foreach routeElement add vector layer on map
...
hideWaitPanel(); // ok in same event thread unless vector rendering is itself asynchronous.
console.log("drawAllRoutes: Ok");
});
});
TBH, using a promise is overkill here. If it works, I would use setTimeout() despite its ugliness.