What is the correct way to effectively clear an interval in my particular situation?

Question

What is the correct way to effectively clear an interval in my particular situation?

    $(".moving_container").mouseenter(
        function(){
             clearInterval(timer);
        }
    ).mouseleave(function(){
             timer = getInterval(slideWidth,slideHeight,slideLength)
    });

I'm currently working on developing a slider and I want it to pause when the cursor is over the slider and then resume when the cursor moves away. However, the functionality seems to be glitchy.

To replicate the issue: Resize the screen and hover your mouse over the slider Then move the cursor out of the slider

Here's another demo for reference

Any tips on how I can properly clear the interval would be greatly appreciated!

javascript jquery html css

Answer 1

Answer №1

The primary issue with the code lies in the repetitive addition of the mouseenter and mouseleave events whenever the window is resized. I recommend reorganizing your code to ensure that these events are only attached once, thus necessitating a restructuring of your current setup.

An expedient fix would involve detaching the events before reattaching them:

$(".moving_container").off('mouseenter').off('mouseleave');

For a more robust solution, a complete rewrite may be necessary: JSFiddle

Answer 2

The primary issue with the code lies in the repetitive addition of the mouseenter and mouseleave events whenever the window is resized. I recommend reorganizing your code to ensure that these events are only attached once, thus necessitating a restructuring of your current setup.

An expedient fix would involve detaching the events before reattaching them:

$(".moving_container").off('mouseenter').off('mouseleave');

For a more robust solution, a complete rewrite may be necessary: JSFiddle

What is the correct way to effectively clear an interval in my particular situation?

Answer №1

Similar questions

Running both the React FrontEnd and NodeJs Backend on a single server

Surprising outcomes encountered when playing audio with JavaScript

Retrieve data from the scss document

Creating a customized design for a React application with the use of Scss and JavaScript variables

Grouped validation of redux form fields using nesting

Unlocking the Power of arrayFilters in MongoDB for Efficient Pipeline-Style Updates

Interactive forms utilizing Ajax, JQuery, and JSON

Tips for implementing autocomplete functionality in AngularJS input fields

Design a div in the shape of a trapezium with clipped overflow

Adjust the position of elements to prevent overlap

Build interactive web pages using Python scripts

Finding the width or height of an image that is dynamically determined by its proportions using JQuery

Filtering URLs using Firefox extension

Apply the "ng-class" directive only if there is an <a> element located after the specified element

Retrieve the chosen item from the autocomplete feature

Creating an Angular search input and connecting it to an API: A step-by-step guide

Occasionally, the resizing of images on the client side and uploading via AJAX can be hit or

Organizing Firestore data into structured JSON format

Create a horizontal bar graph displaying percentages using React.js

In Internet Explorer 9, the cursor unexpectedly moves up above the element