代码之家 › 专栏 › 技术社区 › 0.sh

浏览器中的并行性

web-worker multithreading javascript

0.sh · 技术社区 · 6 年前

我现在正在做一个项目 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 是的。是否有任何方法允许此操作同时执行?

1 回复 | 直到 6 年前

florentine 6 年前

我假设您的意思是,当您按住输入框中的上/下箭头时,当您按住按钮时,文本不会改变大小。

这个问题实际上与并发性无关,而是与您选择监听的事件有关。onchange只在元素失去焦点时触发(在本例中是鼠标向上)。同时,oninput在值更改时立即激发。所以在这种情况下,你想听听oninput事件。

以下是您将如何做到这一点: https://codepen.io/rzrzrz/pen/GBgLYr

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

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前