gpt4 book ai didi

javascript - 如何在浏览器中一致地简要显示值

转载 作者:行者123 更新时间:2023-12-01 01:23:10 25 4
gpt4 key购买 nike

我正在尝试创建一个测试来探索我们潜意识的边界。我想简单地显示一个数字,看看用户是否可以利用他们的直觉来猜测该值 - 他们的潜意识是否能够比他们的意识更快地读取该数字。所以我试图在屏幕上闪烁一个数字几毫秒。在这段代码中,Chrome 的表现似乎不如 Edge。如何才能使其在不同浏览器中工作得更加一致?

我尝试过各种隐藏和显示号码的方法。终于有了这个版本。

<script>

function onLoad() {
numberOfPoints = Math.floor(Math.random() * (99 - 9 + 1)) + 9;
document.f.points.value = numberOfPoints;
setTimeout(hideRun, 3000);
}

function hideRun() {
hide();
document.getElementById("hiddenNumber").innerHTML = numberOfPoints;
document.getElementById("hiddenNumber").style.display = 'block';
setTimeout(hide, 5);
}

function hide() {
document.getElementById("hiddenNumber").style.display = 'none';
}

</script>

<body onload="onLoad()">
<div id=hiddenNumber style="display: block;">GET READY</div>
</body>

在本例中,我希望显示“准备就绪”文本 3 秒,然后显示随机数 5 毫秒。虽然我没有办法实际测量,但 Chrome 浏览器上的 5 毫秒比 Edge 浏览器长很多。

您可以在这里亲自尝试:Test Timer

最佳答案

这里考虑时间是不可靠的,因为您不知道浏览器何时绘制到屏幕,也不知道屏幕何时进行垂直同步。
所以你最好从框架的 Angular 来考虑它。

幸运的是,我们可以使用 requestAnimationFrame 将回调 Hook 到绘制前事件。方法。

let id = 0;
btn.onclick = e => {
cancelAnimationFrame(id); // stop potential previous long running
let i = 0,
max = inp.value;
id = requestAnimationFrame(loop);

function loop(t) {
// only at first frame
if(!i) out.textContent = 'some dummy text';
// until we reached the required number of frames
if(++i <= max) {
id= requestAnimationFrame(loop);
}
else {
out.textContent = '';
}
}
};
Number of frames: <input type="number" min="1" max="30" id="inp" value="1"><button id="btn">flash</button>
<div id="out"></div>

关于javascript - 如何在浏览器中一致地简要显示值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54068772/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com