HOW TO JQUERY - STOP/ START A FUNCTION?

ben reitman

Total Post:96

Points:676
Posted by  ben reitman
 921  View(s)
Ratings:
Rate this:

When you hover over the ".homepage-modules" container is it possible to stop the "next" function so it stops cycling the active state and when you hover off the container the "next" function starts firing again? I'm a bit stumped at the moment and not sure of a way to do this

$('.homepage-modules div:first').addClass('active');

 

$.fn.cycle = function (timeout, cls) {

    var l = this.length,

        current = 0,

        prev = 0,

        elements = this;

 

    if (this.filter('.active').length > 0) {

        current = this.index(this.filter('.active')[0]) + 1;

        prev = current - 1;

    }

 

    function next() {

        elements.eq(prev).removeClass('active');

        elements.eq(current).addClass('active');

        prev = current;

        current = (current + 1) % l;

        setTimeout(next, timeout);

    }

    setTimeout(next, timeout);

    return this;

};

 

$('.homepage-modules div').cycle(2000, 'active');

  1. Alex Leblois

    Post:67

    Points:471
    Re: How to jQuery - stop/ start a function?

    You should store the result of your setTimeout calls in a variable within your plugin. When the mouse is over your element you can use clearTimeout to stop the timer running, and when the mouse moves out you can start the timer again.

    $.fn.cycle = function (timeout, cls) {

        var l = this.length,

            current = 0,

            prev = 0,

            elements = this,

            timerId;

     

        if (this.filter('.active').length > 0) {

            current = this.index(this.filter('.active')[0]) + 1;

            prev = current - 1;

        }

     

        this.parent().hover(function(){

            clearTimeout(timerId);   

        },

        function(){

            timerId = setTimeout(next, timeout);         

        })

     

        function next() {

            elements.eq(prev).removeClass('active');

            elements.eq(current).addClass('active');

            prev = current;

            current = (current + 1) % l;

            timerId = setTimeout(next, timeout);

        }

        timerId = setTimeout(next, timeout);

        return this;

    }; 

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!