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浏览器长5毫秒。

您可以在这里自己尝试：Test Timer

Answer 1

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

幸运的是，我们可以使用requestAnimationFrame方法将回调函数链接到paint-paint事件。

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 个答案: