浏览器中的并行性

Question

我目前正在处理一个项目，当 change 事件侦听器被触发时，浏览器中的内容会更新。

 <html>
   <head>
   </head>
   <body>
       <input type="number" max="100" min="1" value="20" step="1" />
       <p>CHANGE THE SIZE OF THIS TEXT</p>
       <script>
        const input = document.querySelector("input");
        input.addEventListener("change", evt => {
            const p = document.querySelector("p");
            const { target } = evt;
            p.setAttribute("style", `font-size: ${target.value}px`);
        })
       </script>
   </body>
 </html>

这个问题是，假设我花了 3 秒来更改输入元素的值，一切正常，如果我非常快地更改输入元素的值，效果不会显示在 HTMLParagraphElement（好像事件循环中的异步事件是并发执行的）。所以我想到了使用 webworkers 但是在网络工作者中我们不允许使用 DOMElement 或 DOMApis。有没有办法让这些操作同时执行？

Answer 1

我假设您的意思是当您按住输入框内的 up/down 箭头时，当您按住按钮时文本不会改变大小。

这个问题实际上与并发无关，而是与您选择监听的事件有关。 onChange 仅在元素失去焦点时触发（即在本例中为鼠标移开）。同时，当值改变时 oninput 立即触发。所以在这种情况下你想要监听 oninput 事件。

以下是您的操作方式：https://codepen.io/rzrzrz/pen/GBgLYr

input.addEventListener("input", evt => { ... });

浏览器中的并行性

parallelism in the browser

javascript

multithreading

web-worker