如何在条件语句中添加“如果没有单击”

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会中断下一个ended函数，因为如果在视频中没有点击，就永远没有机会记录“结果”。

我还尝试了一个附加的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>

​