Question

只要没有按下鼠标移动或按键，我就会使用此代码每x秒运行一次函数。只要没有用户活动并将其限制为300000，我怎样才能以每轮2倍的值增加计时器？

这是我到目前为止所做的，但我想我需要在更新后再次将我的时间变量放入setInterval。

var idleTime = 0;
var time = 5000;
$(document).ready(function () {
    // Zero the idle timer on mouse movement.
    $(this).on('mousemove', function (e) {
        idleTime = 0;
        time = 5000;
    });
    $(this).on('keypress', function (e) {
        idleTime = 0;
        time = 5000;
    });
    var idleInterval = setInterval(timerIncrement, time);
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 1) {
        time = time*2;
        if( time > 300000 ) { time = 300000; }
        refreshContent();
    }
}

Answer 1

使用超时，增加超时，然后再次调用超时，如下所示。

在下面的示例中，我们在500毫秒内调用超时，然后我们将其加倍，在1000毫秒再次调用，将其加倍到2000毫秒，依此类推。

修改

我不确定你希望它如何工作，但是将jQuery添加到混合中会看起来像这样。一旦mousemove，超时停止，一旦停止移动，超时将从500ms开始

＆＃13;

let timeout
let interval = 500
let maxTime = 10000

function myTimeout() {
      console.log("Delayed: " + interval + "ms")
      interval *= 2
      if(interval < maxTime) {
            timeout = setTimeout(myTimeout, interval)
      } else {
            console.log("I am exiting!")
      }
}

$(document).ready(function () {
    // Zero the idle timer on mouse movement.
    $(document).on('mousemove', function (e) {
        clearTimeout(timeout)
        interval = 500
        timeout = setTimeout(myTimeout, interval)
    });
    $(document).on('keypress', function (e) {
        clearTimeout(timeout)
        interval = 500
        timeout = setTimeout(myTimeout, interval)
    });
    
    // Start the Timeouts
    timeout = setTimeout(myTimeout, interval)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

我已经修改了你的代码，我认为你需要在运行后看到控制台（不要移动你的鼠标它会重置计时器），

var time = 5000;
var idleInterval;
$(document).ready(function () {
    
    idleInterval = setInterval(timerIncrement, time);
    
    $(this).on('mousemove', function (e) {
        idleTime = 0;
        time = 5000;
    	clearInterval(idleInterval);
    	idleInterval = setInterval(timerIncrement, time);
    });
    $(this).on('keypress', function (e) {
        idleTime = 0;
        time = 5000;
    	clearInterval(idleInterval);
    	idleInterval = setInterval(timerIncrement, time);
    });
});

function timerIncrement() {

    console.log('refreshContent is called after '+time+' milliseconds');
    refreshContent();

    time = time*2;
    if( time > 300000 ) { time = 300000; }
    clearInterval(idleInterval);
    idleInterval = setInterval(timerIncrement, time);
}	
function refreshContent()
{
    console.log('Stuffs you want to do when refresh content is called');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

首先，您不能将setTimeout设置为变量。它会传递句柄（基本上是超时的uniqueId。）。编辑：您可以使用该Id来清除特定的超时。

在您的示例中，您可以使用：

var idleTime = 0;
var time = 5000;
var currentActiveTimeoutId = 0;
$(document).ready(function () {
    // Zero the idle timer on mouse movement.
    $(this).on('mousemove', function (e) {
        idleTime = 0;
        time = 5000;
        //reset timeout counter
        setTimeoutCounter(time);
    });
    $(this).on('keypress', function (e) {
        idleTime = 0;
        time = 5000;
        //reset timeout counter
        setTimeoutCounter(time);
    });
    setTimeoutCounter(time);
});

//function to set the timeout and call the incrementor
function setTimeoutCounter(timeOut){
  //clear previous timeout created
  clearTimeout(currentActiveTimeoutId);
  currentActiveTimeoutId = setTimeout(timerIncrement, timeOut);
}

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 1) {
        time = time*2;
        if( time > 300000 ) { time = 300000; }
        refreshContent();
        //recall set timeout and apply the next value of time
        setTimeoutCounter(time);
    }
}

Answer 4

包含mousemove和keypress事件的简单示例。

在触发mousemove和keypress时触发（或达到最长时间）

const init_time = 500;  //init time
const final_max = 5000; //max time
var myTimeout;

$(document).ready(function() {
  //event
  $(this).on('mousemove keypress', function(e) {
    clearTimeout(myTimeout);
    myTimer(init_time);
  });
  //init
  myTimer(init_time);
});

function myTimer(period) {
  if (period >= final_max) {
    clearTimeout(myTimeout);
  } else {
    myTimeout = setTimeout(function() {
      console.log("myTimer -> " + period);
      myTimer(period * 2);
    }, period);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

随着时间的推移增加setInterval时间？

4 个答案:

修改