Как добавить «если нет клика» в условный оператор

Question

ОБНОВЛЕНО : у меня есть условное утверждение, которое зависит от времени, которое пользователь нажимает во время воспроизведения видео. Результат их ответа слишком ранний, правильный или слишком поздний и отображается в конце видео. Как добавить другой вариант результата, если пользователь не щелкнет до окончания видео? В этом случае отказ от нажатия - это другой ответ на слишком позднее нажатие.

В настоящее время у меня работает ...

// get result based on time of click 
  $('#response').on('click', function() {
    var response-time = myVid.currentTime;
    var result;
if (response-time < 5) {
      result = "too early" ;
    } else if (response-time < 10) {
      result = "correct" ;
    } else {
      result = "too late" ;
  }

Я попытался добавить console.log (результат), чтобы проверить, есть лиявляется нулевым или неопределенным «результатом», когда нет клика до окончания видео, поэтому я могу добавить еще один оператор if на основе ответа журнала. Но добавление console.log прерывает следующую завершенную функцию, потому что нет никакой возможности записать «результат», если во время видео нет щелчка.

Я также попробовал дополнительный оператор if, использующий различные комбинации дляВ результате получается что-то, кроме перечисленных выше, но безуспешно. Это кажется мне таким логичным, но это не работает.

var finalResult
if (result != "too early" && result != "correct" && result != "too late") {
  finalResult = "you did not click"
}

Мне кажется, что я схожу по кругу с этим, поэтому любая помощь приветствуется

Answer 1

Устанавливает тайм-аут, который срабатывает через 10 секунд, и, если щелчок не произошел, запускается часть too late и очищается прослушиватель щелчков.

Кроме того, когда прослушиватель щелчков выполняется, очистите тайм-аут:

$('#response').on('click', function() {
  var responseTime = myVid.currentTime;
  var result;
  if (responseTime < 5) {
    console.log("too early");
  } else {
    console.log("correct");
  }
  clearTimeout(timeoutId);
  console.log(result);
});
const timeoutId = setTimeout(() => {
  console.log('too late');
  $('#response').off('click');
}, 10000);

Если вы не хотите иметь жестко запрограммированное значение, во время которого прослушиваются щелчки, и всегда хотите, чтобы too late доходило до конца видео, добавьте прослушиватель для события endedвместо установки тайм-аута:

$('#response').on('click', function() {
  var responseTime = myVid.currentTime;
  var result;
  if (responseTime < 5) {
    console.log("too early");
  } else {
    console.log("correct");
  }
});
$('#response').on('ended', () => {
  console.log('too late');
  $('#response').off('click');
});

Если вам также необходимо различать слишком поздний щелчок и вообще не нажимать, добавьте еще одно условие к проверке responseTime. Живая демоверсия:

const myVid = $('video');
myVid[0].play();
let result;
$('#response').one('click', function() {
  var responseTime = myVid[0].currentTime;
  if (responseTime < 5) {
    result = "too early";
  } else if (responseTime < 8) {
    result = "correct";
  } else {
    result = 'too late';
  }
  myVid.off('ended');
  $('#response').prop('disabled', true);
});
myVid.one('ended', () => {
  console.log('no response');
  $('#response').off('click');
  $('#response').prop('disabled', true);
});

setTimeout(() => {
  console.log('End result:', result);
}, 12000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><button id="response">response - click here</button></div>
<video controls width="300" height="300">
  <source src="https://i.temp.media/video/50-x-50-10.mp4" type="video/mp4">
</video>