Javascript - GUI programming

Question

When the selection of the dropdown does change, I would like to:

1) show some GUI blocking overlay via a div over the whole website

2) then process some code

3) then hide the overlay.

The problem is that when I write this logic in the eventlistener-function then onChange 2) would execute, then the GUI performs the updates of 1) and 3), because the GUI is only updating in Javascript when all functions are executed. That's not the correct order and not what I want.

So I thought I introduce a Webworker, but it turned out that the Webworker does exeactly nothing, the order is still wrong.

demo_workers.js:

postMessage("show_overlay_runtime");
postMessage("do_stuff");
postMessage("hide_overlay_runtime");

<!DOCTYPE html>
<html>
    <head>
        <style>
            #overlay {
                position: absolute;
                top:200px;
                left:0;
                background-color: #000;
                display:none;
                width:100%;
                height:200px;
            }
        </style>
    </head>
    <body>
        <div id="overlay"></div>
        <select id="my_dropdown">
            <option>option1</option>
            <option>option2</option>
        </select>

        <script>
            let my_dropdown = document.getElementById('my_dropdown');
            my_dropdown.addEventListener('change', function (e) {
                dropdown_network_change_response();
            }, false);
            
            var workers = {};

            function dropdown_network_change_response() 
            {
                let worker_name = "worker1";
                startWorker(worker_name, "demo_workers.js");
                workers[worker_name].onmessage = function(event) {
                    if(event.data === "show_overlay_runtime") {
                        document.getElementById('overlay').style.display = "flex";
                    }
                    else if (event.data === "do_stuff") {
                        for(let i = 0; i < 1000000; i++) {

                        }
                    }
                    else if (event.data === "hide_overlay_runtime") {
                        document.getElementById('overlay').style.display = "none";
                    }
                    alert("test");
                };
            }

            function startWorker(worker_name, file) {
                if(typeof(Worker) !== "undefined") {
                    if(typeof(workers[worker_name]) == "undefined") {
                        workers[worker_name] = new Worker(file);
                    }
                    
                } else {
                    document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
                }
            }

            function stopWorker(worker_name) { 
                workers[worker_name].terminate();
                workers[worker_name] = undefined;
            }
        </script>
    </body>
</html>

So how can I achieve what I mentioned above in Javascript?

setTimeout is not what I want. I want hide when do_stuff is executed and not when a timer does elapse — Ini
– Ini, Commented Jul 10, 2018 at 1:05
Use it to start do_stuff, so the GUI gets a chance to show the overlay. — Scott Hunter
– Scott Hunter, Commented Jul 10, 2018 at 1:07
Can you please post the edited code? I'm not sure how to do it — Ini
– Ini, Commented Jul 10, 2018 at 1:11
I mean how can I perform a series of actions (after a user interaction with the GUI) but the first action should perform a GUI update before the 2nd action does start? I guess that is the question in one sentence... — Ini
– Ini, Commented Jul 10, 2018 at 1:13

Scott Hunter · Accepted Answer · 2018-07-10 01:17:44Z

1

You can use setTimeout to give the GUI a chance to do its updating before certain code starts; for example:

function afterGUIupdate() {
    postMessage("do_stuff");
    postMessage("hide_overlay_runtime");
}
postMessage("show_overlay_runtime");
setTimeout( afterGUIupdate, 1 );

Technically, your code finishes after calling setTimeout, so the GUI can do its updating. Then the timeout kicks in, executing the code you want to occur after that.

answered Jul 10, 2018 at 1:17

Scott Hunter

50k12 gold badges64 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ini Over a year ago

I do not even need the Worker right? What's then the purpose of a Worker, I mean isn't that the best scenario for having a Worker normally? I mean the Worker does exatcly nothing without using setTimout...

Ini Over a year ago

The setTimeout solution is not very clean. I have a css transition within show and hide and the show-transition should finish before hide is triggered. This is not possible with setTimout. It seems like Javascript has big issues with GUI programming. Is there any clean solution for this problem?

Scott Hunter Over a year ago

Call setTimeout when you've detected the end of the transition; how to do that has been answered elsewhere.

Collectives™ on Stack Overflow

Javascript - GUI programming

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related