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

浏览器中的并行性

web-worker multithreading javascript

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

我现在正在做一个项目 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 回复 | 直到 7 年前

florentine 7 年前

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

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

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

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前