CODEWITHSUNDEEP
javascriptjquerysetinterval
SeaBass
SeaBass

Reputation: 1764

Increase setInterval time over time?

I'm using this code to run a function every x seconds as long as there are no mouse movements or keys pressed. How can I increase the timer with 2x the value for every round as long as there is no user activity and cap it at 300000?

This is what I have so far, but I guess I need to actually get my time variable into the the setInterval again as it's been updated.

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();
    }
}

Upvotes: 1

Views: 2379

Answers (5)

Vlad Dobrinov
Vlad Dobrinov

Reputation: 256

Had same need in 2k25)

function timeoutProgression(firstDelay, step, stop, func) {
    let timer = 0;
    let currentDelay = firstDelay;

    cycle();

    function cycle() {
      setTimeout(() => {
        currentDelay += step;
        func();
        if (currentDelay < stop) cycle();
      }, currentDelay);
    }
  }

Upvotes: 0

Get Off My Lawn
Get Off My Lawn

Reputation: 36299

Use a timeout, and increase the timeout and then call the timeout again like below.

In the below example we call the timeout in 500ms, then we double it, to get called again at 1000ms, double that to 2000ms, and so on.

Edit

I am not exactly sure how you want it to work, but adding your jQuery to the mix, would look something like this. Once you mousemove, the timeout stops, once you stop moving the timeout starts back at 500ms

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)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 2

Dalin Huang
Dalin Huang

Reputation: 11342

A simple example with mousemove and keypress events.

reset when mousemove and keypress triggered (or max time reached)

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>

Upvotes: 0

Nathan
Nathan

Reputation: 1520

First of all, you can't set setTimeout to a variable. It passes you the handle(basically the uniqueId of the timeout.).EDIT: You can use that Id to clear that specific timeout.

On your example, you can use this:

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);
    }
}

Upvotes: 0

Ananthakrishnan Baji
Ananthakrishnan Baji

Reputation: 1290

I have modified your code to this, I think this is what you need see console after running (don't move your mouse it will reset timer),

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>

Upvotes: 1

Related Questions