Как кратко отображать значение последовательно в разных браузерах - PullRequest
Новая
       1

Как кратко отображать значение последовательно в разных браузерах

0 голосов
/ 07 января 2019

Я пытаюсь создать тест, который исследует границы нашего подсознания. Я хочу кратко отобразить число и посмотреть, сможет ли пользователь использовать свою интуицию, чтобы угадать значение - может ли его подсознание читать число быстрее, чем его сознательное я. Поэтому я пытаюсь высветить число на экране в течение нескольких миллисекунд. 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>

В этом случае я надеюсь отобразить текст Get Ready в течение 3 секунд, а затем показать случайное число в течение 5 миллисекунд. Хотя у меня нет способа измерить его, 5 миллисекунд в браузере Chrome намного дольше, чем в браузере Edge.

Вы можете попробовать сами здесь: Таймер теста

Ответы [ 2 ]

0 голосов
/ 07 января 2019

Можете ли вы попробовать 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 для записи и проверки кросс-браузерной точности.

0 голосов
/ 07 января 2019

Мышление с точки зрения времени здесь не надежно, потому что вы не знаете, когда браузер будет рисовать на экране, или когда экран будет выполнять V-синхронизацию.
Так что лучше подумать об этом с точки зрения кадров.

К счастью, мы можем подключить обратные вызовы к событию перед рисованием, используя метод 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...