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（result）来查看在视频结束之前没有点击时是否存在null或未定义的“结果”，因此我可以根据日志响应添加另一个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>

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

1 个答案: