Pause the setInterval function on hover and continue when mouse is moved away

Question

Pause the setInterval function on hover and continue when mouse is moved away

I'm encountering an issue while trying to tweak some code I already have. My goal is to stop the setInterval function when the mouse hovers over div id "mine" and then resume it when the mouse moves away from the div. Despite my efforts throughout the day and night, I can't seem to make it work properly. Any assistance on this matter would be highly appreciated. Thank you.

jQuery(document).ready(function(){

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

    // perform AJAX request
    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);

                // display 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);

                // show message if available
                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);

});

javascript jquery html css ajax

Answer 1

Answer №1

I'm uncertain about the specific location where you wish for that to occur...

What I am trying to convey is that I do not observe div#mine within that code, so it is unclear whether it should be contained within one of them, outside all of them, or both inside and outside under particular circumstances...

...regardless, the fundamental concept is as follows:

var doSomethingId;

function doSomething ( ) { }

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

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

This essentially summarizes the process. The jQuery alternative does not differ significantly.

The crucial aspect is to store the ID (var id = setInterval(/*...*/);) and utilize it for clearing the interval (clearInterval(id);).
Rather than "restarting" the interval, you need to call id = setInterval(...); again, transforming the id into the new interval to halt it.

Edit:

This might be an instance of an "XY" dilemma...
Meaning that you seek a solution to a problem which is not fundamentally the root issue, but rather a secondary concern layered on top of the core problem.

A quick illustration:
I usually navigate through most forms by tabbing in, moving through the fields with tabs, and then pressing ENTER or tabbing down to hit the submit button followed by ENTER.

In this scenario (for individuals using keyboards/touchscreens, etc.), the initial issue still remains unresolved for now.

However, if you are open to making some adjustments, the resolution can be similar.

To elaborate, instead of your `setInterval(function () { jQuery./.../ });

Consider implementing something like this;

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

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

// complete setInterval(function () { jQuery.ajax(...); }); copied and pasted here, including 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 demonstrated, there is no longer a necessity to initiate and terminate the interval.
An if statement is utilized to exit whenever I am in a state where updates are unnecessary (ideally, it should go further and terminate any ongoing XHR queries if you start editing a field).

Answer 2

I'm uncertain about the specific location where you wish for that to occur...

What I am trying to convey is that I do not observe div#mine within that code, so it is unclear whether it should be contained within one of them, outside all of them, or both inside and outside under particular circumstances...

...regardless, the fundamental concept is as follows:

var doSomethingId;

function doSomething ( ) { }

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

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

This essentially summarizes the process. The jQuery alternative does not differ significantly.

The crucial aspect is to store the ID (var id = setInterval(/*...*/);) and utilize it for clearing the interval (clearInterval(id);).
Rather than "restarting" the interval, you need to call id = setInterval(...); again, transforming the id into the new interval to halt it.

Edit:

This might be an instance of an "XY" dilemma...
Meaning that you seek a solution to a problem which is not fundamentally the root issue, but rather a secondary concern layered on top of the core problem.

A quick illustration:
I usually navigate through most forms by tabbing in, moving through the fields with tabs, and then pressing ENTER or tabbing down to hit the submit button followed by ENTER.

In this scenario (for individuals using keyboards/touchscreens, etc.), the initial issue still remains unresolved for now.

However, if you are open to making some adjustments, the resolution can be similar.

To elaborate, instead of your `setInterval(function () { jQuery./.../ });

Consider implementing something like this;

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

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

// complete setInterval(function () { jQuery.ajax(...); }); copied and pasted here, including 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 demonstrated, there is no longer a necessity to initiate and terminate the interval.
An if statement is utilized to exit whenever I am in a state where updates are unnecessary (ideally, it should go further and terminate any ongoing XHR queries if you start editing a field).

Answer 3

Answer №2

After checking out this article, it seems like you're interested in achieving something similar to this:

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

<p>Timer:</p>
<div id="custom"></div>
<div id="countdown">
</div>

<script>

jQuery(document).ready(function(){
    $( "#custom" )
    .mouseleave(function() {
        enableTimer();
    })
    .mouseenter(function() {
        disableTimer();
    });
});

var count=15;
var timerActive = true;
var countdown=setInterval(timer, 1000); //updates every second

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

  if (count == 0){
     alert('execute action here!');
     count = 15;
  }

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

function enableTimer(){
    timerActive = true;
}
function disableTimer(){
    timerActive = false;
}
</script>

</body>
</html>

Answer 4

After checking out this article, it seems like you're interested in achieving something similar to this:

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

<p>Timer:</p>
<div id="custom"></div>
<div id="countdown">
</div>

<script>

jQuery(document).ready(function(){
    $( "#custom" )
    .mouseleave(function() {
        enableTimer();
    })
    .mouseenter(function() {
        disableTimer();
    });
});

var count=15;
var timerActive = true;
var countdown=setInterval(timer, 1000); //updates every second

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

  if (count == 0){
     alert('execute action here!');
     count = 15;
  }

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

function enableTimer(){
    timerActive = true;
}
function disableTimer(){
    timerActive = false;
}
</script>

</body>
</html>

Pause the setInterval function on hover and continue when mouse is moved away

Answer №1

Edit:

Answer №2

Similar questions

Transferring information from one webpage to another using AJAX or embedding it with an iframe

Tips for designing a dropdown menu for selecting the number of passengers

Transforming an image into a geometric shape using html and css - step by step guide

Guide to aligning a URL in an HTML file

Benefits of Utilizing Object.create

ClickAwayListener's callback function stops executing midway

The Angular Animation constantly resets with each new action taken

Retrieving data from the <script> tag and transferring it to the t-esc tag within Odoo 12

Obtain both the key and value from an Object using Angular 2 or later

Using jQuery to create tabs and display or hide tab-like content

Include a CSS counter style class that adds leading zeros

I find myself facing a roadblock in navigating Servlets and HTML

Combining data search for an element within an array

What's inside the navigation bar, icons, and content cards? (Using HTML and Bootstrap)

Update the "select" element's "option" value upon redirection from another page

Text is not wrapping onto a new line following the <hx> elements

Testing a feature in Angular that modifies a variable

Adding Zod validation for elements within an array in a React TypeScript application

Adjust the placement of a dropdown menu placed within a table

Implementing Google Maps JS API with Inertia.js server-side rendering: A beginner's guide