javascript - 使用jquery重置每个文档点击的超时

Question

我正在努力让每个文档点击交互重置超时计时器。 clearTimeout 似乎不起作用。

jquery:

$(document).click(function(e){
  $("#vidBack").hide();
  $(".mainer").show();

  function stopTimer() {
    clearTimeout(timer);
  }

  var timer =  setTimeout(function(){
        $(".bury").hide();
        $(".mainer").hide();
        $("#meetSub").hide();
        $("#leaguesSub").hide();
        $("#memberSub").hide();
        $(".bury").hide();
        $("#welcomeSub").show();
        $("#vidBack").show();
        $("#vida").prop("volume", 0);       
  }, 10000);
});

Answer 1

将您的代码重构为如下所示:

var timer;

function resetTimer() {
  if(timer)
    clearTimeout(timer);
  
  $("#vidBack").hide();
  $(".mainer").show();
  
  timer = setTimeout(function() {
    $(".mainer").hide();
    $("#vidBack").show();
  },  5000);
  
}

$(document).click(resetTimer);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainer">mainer</div>
<div id="vidBack">vidBack</div>