Add a timeout to "setInterval()"?

Question

I have a setInterval function like below on a Divbox so if I leave a divbox, this setInterval is triggered:

setInterval("playthis()", 1000);

What I want it to do: If I leave the divbox and lets say within the next 2 second rehover it, the setInterval should not triggered.

Is this possible?

Answer 1

You can use cousins setTimeout and clearTimeout to set a function callback that invokes your setInterval only after 2 uninterrupted seconds:

var handle = null;

function yourDivboxLeaveHandler() {
   handle = setTimeout(startPlay, 2000);
}

function yourDivboxHoverHandler() {
   if (handle !== null) {
       clearTimeout(handle);
       handle = null;
   }
}

function startPlay() {
   setInterval(playthis, 1000); // use function references please, not eval
   handle = null;
}

You will want much better variable/function names than this though.

Answer 2

Yes. Just make some creative use of clearInterval().

In other words, no, such a feature doesn't come out-of-the-box, but you can build it yourself by calling clearInterval() if the mouse re-enters the divbox before the interval is triggered.

For example:

var divBox = document.getElementById('MyDivBox');
var TimeoutHandle = null;

divBox.onmouseover = function()
{
    if ( TimeoutHandle != null )
    {
        clearTimeout(TimeoutHandle);
    }
}

divBox.onmouseout = function()
{
    TimeoutHandle = setTimeout(function()
    {
        TimeoutHandle = null;
        setInterval(playthis, 1000);
    }, 2000);
}

Answer 3

First of all is a bad practice to have the code evalued in a setInterval so you should avid double quotes. Then you can clear the interval like this:

 var int = setInterval(playthis, 1000);
 clearInterval(int)