如何在浏览器中短暂地一致显示值

Question

我正在尝试创建一种探索潜意识边界的测试。 我想简单地显示一个数字，看看用户是否可以凭直觉来猜测数值-他们的潜意识能够比其有意识的自我更快地阅读数字。 因此，我尝试将数字闪烁到屏幕上几毫秒。 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浏览器长得多。

您可以在这里自己尝试：测试计时器

Answer 1

在这里进行时间思考是不可靠的，因为您不知道浏览器何时绘制到屏幕上，也不知道屏幕何时进行垂直同步。
因此，您最好从框架的角度考虑它。

幸运的是，我们可以使用requestAnimationFrame方法将回调连接到前绘画事件。

 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>

Answer 2

您可以尝试使用2D画布，看看是否有帮助？

<html>
<head>
<script>
var numberOfPoints;

var canvas;
var context;

function onLoad() {
  canvas = document.getElementById("myCanvas");
  context = canvas.getContext("2d");
  context.font = "30px Arial";
  // context.fillText("...", 10, 50);
  numberOfPoints = Math.floor(Math.random() * (99 - 9 + 1) ) + 9;
  setTimeout(hideRun, 3000);
}
function hideRun() {
  context.fillText(numberOfPoints, 10, 50);
  setTimeout(hide, 5);
}
function hide() {
  context.clearRect(0, 0, canvas.width, canvas.height);
}
</script>
</head>
<body onload="onLoad()">
<canvas id="myCanvas"></canvas>
</body>
</html>

在我的测试中，它似乎比CSS属性更一致地显示了该数字，但是绝对可以肯定，我建议使用60fps的屏幕阅读器来记录和验证跨浏览器的准确性。

如何在浏览器中短暂地一致显示值

问题描述

2 个解决方案

解决方案1
2 已采纳 2019-01-07 05:25:24

解决方案2
0 2019-01-07 05:26:30

如何在浏览器中短暂地一致显示值

问题描述

2 个解决方案

解决方案1 2 已采纳 2019-01-07 05:25:24

解决方案2 0 2019-01-07 05:26:30

解决方案1
2 已采纳 2019-01-07 05:25:24

解决方案2
0 2019-01-07 05:26:30