代码之家  ›  专栏  ›  技术社区  ›  Ini

javascript-GUI编程

  •  0
  • Ini  · 技术社区  · 7 年前

    当下拉列表的选择发生更改时,我希望:

    1)通过DIV在整个网站上显示一些GUI阻塞覆盖

    2)然后处理一些代码

    3)然后隐藏覆盖。

    问题是,当我在eventListener函数中编写此逻辑时,onchange 2)将执行,然后GUI执行1)和3)的更新,因为当所有函数执行时,GUI仅在javascript中更新。这不是正确的顺序,也不是我想要的。

    所以我想我介绍一个网络工作者,但结果发现网络工作者什么也没做,顺序还是错的。

    演示工.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>

    那么,我如何才能实现我在javascript中提到的内容呢?

    1 回复  |  直到 7 年前
        1
  •  1
  •   Scott Hunter    7 年前

    setTimeout

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