Stop jQuery timeout when mouse hovers over a div

Question

Stop jQuery timeout when mouse hovers over a div

I'm currently dealing with a class:

<ul class="topStatsWrapper">
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
    <li><a href="">link</a></li>
</ul>

This particular ul class is set to update every 3 seconds. I'm looking for a solution on how to pause this automatic update when the mouse hovers over the .topStatsWrapper class, and resume it once the mouse leaves. Any ideas would be greatly appreciated. Thanks!

initialize: function() {
    window.setTimeout( _.bind( this.updateStats, this, true ), 3 * 1000);
},

If you need to view the full code, you can access it here: http://pastebin.com/nGnfaeN5

javascript jquery html css

Answer 1

Answer №1

It appears that the information provided may not be sufficient to give a precise response. I recommend assigning your setTimeout function to a variable that can be cleared upon hovering over your class.

var timer; // defined globally

// within your function
initialize: function() {
    timer = setTimeout( _.bind( this.updateStats, this, true ), 3 * 1000);
},

Next, utilize an event listener:

$(document).on("mouseover", ".myclass", function(){
    clearTimeout(timer);
});

Consider using setInterval instead:

var timer; // defined globally

// within your function
initialize: function() {
    timer = setInterval( function(){ ... your code ... }, 3000);
},

Again, employ an event listener:

$(document).on("mouseover", ".myclass", function(){
    clearInterval(timer);
});

Answer 2

It appears that the information provided may not be sufficient to give a precise response. I recommend assigning your setTimeout function to a variable that can be cleared upon hovering over your class.

var timer; // defined globally

// within your function
initialize: function() {
    timer = setTimeout( _.bind( this.updateStats, this, true ), 3 * 1000);
},

Next, utilize an event listener:

$(document).on("mouseover", ".myclass", function(){
    clearTimeout(timer);
});

Consider using setInterval instead:

var timer; // defined globally

// within your function
initialize: function() {
    timer = setInterval( function(){ ... your code ... }, 3000);
},

Again, employ an event listener:

$(document).on("mouseover", ".myclass", function(){
    clearInterval(timer);
});

Answer 3

Answer №2

Revise your updateStats function like so...

updateStats: function() {

    if (window._noUpdate === true) return;

    var that = this, update;
    this.showLoading( true );

    update = $.when( update,
        that.ajax( 'getTopics', null, '.newestThreads' ),
        that.ajax( 'getPosts', {limit: JSON.stringify([0, 3])}, '.newestPosts' )
    );

    update.done( function() {
        that.showLoading();
        window.setTimeout( _.bind( that.updateStats, that, true), that.interval * 1000);
    });

}

Modify your initialize function like this...

initialize: function() {
    this.interval = parseInt($('.topStatsWrapper').attr('data-topstats-interval'));
    window.setTimeout( _.bind( this.updateStats, this, true ), 3 * 1000);
    $("body").on("hover", ".topStatsWrapper",
        function() {
            window._noUpdate = true;
        },
        function() {
            window._noUpdate = false;
        }
    });
},

This change introduces a global variable (_noUpdate) to indicate if the cursor is over the ul. If it's true, the update function will halt execution.

Answer 4

Revise your updateStats function like so...

updateStats: function() {

    if (window._noUpdate === true) return;

    var that = this, update;
    this.showLoading( true );

    update = $.when( update,
        that.ajax( 'getTopics', null, '.newestThreads' ),
        that.ajax( 'getPosts', {limit: JSON.stringify([0, 3])}, '.newestPosts' )
    );

    update.done( function() {
        that.showLoading();
        window.setTimeout( _.bind( that.updateStats, that, true), that.interval * 1000);
    });

}

Modify your initialize function like this...

initialize: function() {
    this.interval = parseInt($('.topStatsWrapper').attr('data-topstats-interval'));
    window.setTimeout( _.bind( this.updateStats, this, true ), 3 * 1000);
    $("body").on("hover", ".topStatsWrapper",
        function() {
            window._noUpdate = true;
        },
        function() {
            window._noUpdate = false;
        }
    });
},

This change introduces a global variable (_noUpdate) to indicate if the cursor is over the ul. If it's true, the update function will halt execution.

Stop jQuery timeout when mouse hovers over a div

Answer №1

Answer №2

Similar questions

showcase fresh material using the jquery fancybox

Steps to position an image without a background in the middle of a smaller container:

Typescript/Three.js encounters the issue of game objects becoming undefined

Tricks for disabling _blank behavior in jquery?

The focal point on the canvas is off-center during image rotation

Ways to display or conceal a textbox depending on the choice made from a dropdown list

Unable to display the full height of the browser

Guide to testing Vuex Mutations with Vue-test-utils and Jest

Creating Visuals with CSS Gradients: A Tutorial on Generating Images and SVG Files

The CSS properties of 'hidden' mimic those of 'flex'

What is stopping me from utilizing ES6 template literals with the .css() method in my code?

What is the best way to target the first child element in this scenario?

Header spanning the entire width with varying ends

content organized in tabs using the fancybox feature

How can I retrieve a list of dynamic dropdown/selectbox options using JavaScript and Laravel?

Converting phone numbers with conditional tests to regular expressions

Adding content to a text field and then moving to the next line

Deactivate Search Functionality for Users who are not Logged in on an Angular 2 Application

When invoking a JavaScript method, the context variable 'this' is lost

$http promise chain executing in an incorrect sequence