事件循环和同步阻塞
事件循环和同步阻塞
提问于 2019-03-31 06:36:12
我正在经历"JS对于不耐烦的程序员“，我遇到了下面的代码。
我正在尝试理解同步的本质，以及为什么Blocking...要在sleep(5000)之后才被设置。
我相信代码的目的是让Blocking...在阻塞发生时出现在屏幕上，但当我在JSFiddle中输入它时，这并不是实际的响应
document.getElementById('block')
.addEventListener('click', doBlock);
function doBlock(event) {
setStatus('Blocking...');
sleep(5000);
setStatus('Done');
}
function sleep(milliseconds) {
const start = Date.now();
while ((Date.now() - start) < milliseconds);
}
function setStatus(status) {
document.getElementById('statusMessage')
.textContent = status;
}<a id="block" href="#">Block</a>
<div id="statusMessage"></div>
<button>Click me!</button>
回答 1
Stack Overflow用户
发布于 2019-03-31 08:21:47
我可以分享我的发现与以下稍微修改的超文本标记语言/JS代码。
作为expected.
- Firefox开发人员版67b6 (64位)，
- Chromium版本73.0.3683.75 (openSUSE Build) (64位)偶尔作为expected.
- Firefox稳定量子60.6.1ESR(64位)工作，但仍不能按预期工作。
但是，如果移动到const delayBlocking = 50毫秒延迟，它还会显示“阻塞...”在Firefox稳定的Quantum 60.6.1 ESR浏览器上。
我的解释是(根据Mark在评论中所说的)浏览器必须有时间来更新DOM。浏览器必须能够渲染至少一个显示“阻塞...”的帧。在进入阻塞状态之前呈现的状态消息(此处为5秒)。这可以通过适当调整的setTimeout来完成，如下所示。--你好，M。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<a id="block" href="#">Block</a>
<div id="statusMessage"></div>
<button>Click me!</button>
<script>
document.getElementById('block')
.addEventListener('click', doBlock);
function doBlock(event) {
setStatus('Blocking...');
// Introducing some ...
const delayBlocking = 0;
setTimeout(function() {
sleep(5000);
setStatus('Done');
}, delayBlocking);
}
function sleep(milliseconds) {
const start = Date.now();
while ((Date.now() - start) < milliseconds);
}
function setStatus(status) {
document.getElementById('statusMessage')
.textContent = status;
}
</script>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55436279
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号