clear setinterval on mouseover and resume on mouse out

Question

I am trying to modify some existing code and can't get it working correctly. When the mouse is over div id "mine" I need the setinterval to stop and when the mouse is not over the div for the set interval to resume. I've tried and tried all day and night to get this working and just don't seem to be able to do it. Any help would be greatly appreciated. Thank you.

jQuery(document).ready(function(){

// check all
jQuery(this).on('click', '#selectall', function() {
  jQuery('.checkbox').prop('checked', jQuery(this).is(":checked"));
});

    // ajax
    jQuery(this).on('submit', 'form[name="dispatchform"]', function(){
        jQuery.ajax({
            url: jQuery(this).attr('action'),
            data: jQuery(this).serialize(),
            type: 'post',
            beforeSend: function(){jQuery('body').css('opacity', '0.5');},
            success: function(data) {
                var response = jQuery(data).find('#dispatchTable').html();
                jQuery('#dispatchTable').html(response);

                //message
                var msg = jQuery(data).find('td.messageStackError, td.messageStackSuccess').html();
                jQuery('#msg').css({
                    'padding': '10px',
                    'text-align': 'center',
                    'font-size': '12px',
                    'background-color': 'darkkhaki',
                    'margin': '10px 0',
                    'color': '#fff'
                }).html(msg);
            },
            complete: function(){jQuery('body').css('opacity', '1');}
        });
        return false;
    });


          setInterval(function() {
      jQuery.ajax({
            url: jQuery(this).attr('action'),
            data: jQuery(this).serialize(),
            type: 'post',
            beforeSend: function(){jQuery('body').css('opacity', '0.5');},
            success: function(data) {
                var response = jQuery(data).find('#dispatchTable').html();
                jQuery('#dispatchTable').html(response);

                //message
                var msg = jQuery(data).find('td.messageStackError, td.messageStackSuccess').html();
                if(msg !== undefined) {
                jQuery('#msg').css({
                    'padding': '10px',
                    'text-align': 'center',
                    'font-size': '12px',
                    'background-color': 'darkkhaki',
                    'margin': '10px 0',
                    'color': '#fff'
                }).html(msg);
                }
            },
            complete: function(){jQuery('body').css('opacity', '1');}
        });
    }, 15000);

});

Answer 1

I'm not sure where, exactly you want that to happen...

What I mean is that I don't see div#mine anywhere in that code, so I don't know if it's supposed to be inside of one of those, or outside of all of them, or both outside, and also inside, if under special circumstances...

...regardless, the general idea is the following:

var doSomethingId;

function doSomething ( ) { }

var mine = document.querySelector("#mine");
mine.addEventListener("mouseover", function () {
    doSomething();
    doSomethingId = setInterval(doSomething, 10000);
});

mine.addEventListener("mouseout", function () {
    clearInterval(doSomethingId);
});

There's not a whole lot more to it than that. The jQuery also isn't much smaller.

The key is to save the ID (var id = setInterval(/*...*/);) and use it to clear the interval (clearInterval(id);).
You don't "restart" the interval; rather, you call id = setInterval(...); again, so that the id is now the new interval, so you can stop the new interval.

Edit:

This is really an "XY" problem...
That is to say that you're looking for a solution to a problem that isn't really at the root of your problems, but rather a problem that is an offshoot, on top of the root.

A quick example:
most forms, I fill out by tabbing into, tabbing through the fields, and then either hitting ENTER, or tabbing down to the submit button and hitting ENTER

In this case (people who use keyboards/touchscreens/etc), you're still going to have the problem you're facing, now.

That said, if you're willing to refactor a little, the solution can be the same.

What I mean is, instead of your `setInterval(function () { jQuery./.../ });

What you want to do is something like;

var shouldUpdate = true,
    form  = this,
    $mine = jQuery("#mine");

$mine.on("mouseover", function () { shouldUpdate = false; });
$mine.on("mouseout",  function () { shouldUpdate = true;  });

// whole setInterval(function () { jQuery.ajax(...); }); copied and pasted here, plus the `if`
function submitForm () {
    if (!shouldUpdate) { return; }
    jQuery.ajax(/* ... */);
}

var submitId = setInterval(submitForm, 15000);
// clearInterval(submitId); -- just remember to set the new ID, if you restart it

As you can see, I don't really need the interval to be started and stopped, now.
I've got an if that returns if I'm in any state that I shouldn't be updating in (really, this should go one step further, and abort any XHR calls that are already happening, if you do start editing a field).

Answer 2

Based on this post I guess you'd like to accomplish something like this?

<!DOCTYPE html>
<html>
<head>
<style>
#mine{
    width:200px;
    height:200px;
    border:1px solid red;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

<p>Counter:</p>
<div id="mine"></div>
<div id="counter">
</div>

<script>

jQuery(document).ready(function(){
    $( "#mine" )
    .mouseout(function() {
        enableCounter();
    })
    .mouseover(function() {
        disableCounter();
    });
});

var count=10;
var counterEnabled = true;
var counter=setInterval(timer, 1000); //run every 1 second

function timer(){
  if (counterEnabled)
    count--;

  if (count == 0){
     alert('execute submit here!');
     count = 10;
  }

  $('#counter').text(count);
}

function enableCounter(){
    counterEnabled = true;
}
function disableCounter(){
    counterEnabled = false;
}
</script>

</body>
</html>