JavaScript - 时间注销，点击重置时间注销

Question

我有一个代码，给出 20 分钟的时间，然后断开用户。它工作正常。但是，如果用户正在页面上工作，我需要团队返回到初始值，因为我使用了很多 ajax 并且页面最终没有更新，因为它应该返回到初始值。

HTML

<h2 id="theTime" style="font-weight: bold;font-size: 16px; color:#FFF;">20:00 </h2>

JavaScript

$("#index-body").click(function() {
    var newTime = "s";
    sivamtime(newTime);
});

JavaScript - 时间注销

min=20;
sec=0;
var now = new Date();
var expire_time = new Date(now.getTime() + (min * 60000));
var timer_ticket = null;

function sivamtime(newTime) {
    var progressive_time = new Date();
    if((expire_time - progressive_time) < 1 || (min == 0 && sec == 0)){
        //$(document).ready(function() {
        $('#myModal').modal('show');
        $("#modal-body-info").html('<b>Por segurança</b>,<br> Tempo esgotado, não utilizou o site no prazo de 20 minutos');
        $('.logout').click(function() {
          window.location='login.php';
        });
        //});
    } else{
        min = "20";
        sec = "00";
        var countdown = (expire_time - progressive_time) / 1000;
        min = Math.ceil(countdown / 60) - 1;
        sec = Math.ceil(countdown % 60) - 1;
        if (min<=9 ) { min="0"+min; }
        if (min==0) {min="00";}
        if (sec<=9) { sec="0"+sec; }

        time = min + ":" + sec + " " ;

        if (document.getElementById) { document.getElementById('theTime').innerHTML = time; }
        else if (document.layers) {
            document.layers.theTime.document.write(time);
            document.layers.theTime.document.close(); 
        }
            timer_ticket = setTimeout("sivamtime()", 1000);
        }
    }

    $(document).ready(function() {
        sivamtime();
});

Answer 1

我在jsFiddle上写了一个简单的结构，你可以引用:

Click Here

HTML:

<div id="thebody"  style="border:1px solid">
    <br><br><br><br>
</div>

JS/jQuery:

 let theTimer = function(callback) {
  let timerId

  this.stop = () => {
    window.clearTimeout(timerId)
  }

  this.start = () => {
    window.clearTimeout(timerId)
    timerId = window.setTimeout(callback, 2000)
  }
}

let newTimer = new theTimer(function() {
  console.log("Done!")
})

$("#thebody").click(function(){
   console.log('timer start/restart')
   newTimer.stop()
   newTimer.start()
})