clearTimeout not working - setinterval problems

Question

i'm coding a slider ...

it have btns and it changes slides automatically.

but whene we click on buttons setInterval code is doing its work !

problem in an example :

it shoud change the slide in next 5s . ok ?

but whene we click on arrows after 2 sec

setintrelval shoud change slide automatically at next 5s. but it change at next 3s.

// other functions ...

$(document).ready(function(){

    var timeout_id = 0;
    var timeout_id = setInterval( function(){next()}, 5000)
})

    var originalAddClassMethod = jQuery.fn.addClass;
        $.fn.addClass = function(){
        var result = originalAddClassMethod.apply( this, arguments );
        jQuery(this).trigger('cssClassChanged');
        return result;
    }


    $('.customers_comment li').bind('cssClassChanged', function(){ 
        var id = $('.customers_comment li.act').attr('data-id');
        $('.customers_comment .dots a[href="#'+id+'"]').addClass(act).siblings('a').removeClass(act) 
        clearTimeout(timeout_id);
     })

i upload the theme in here

http://demo.eagle-design.ir/amin/#sec4

Answer 1

timeout_id is not defined where you call clearTimeout. Try with :

$(document).ready(function(){

    var timeout_id = 0;
    var timeout_id = setInterval( function(){next()}, 5000)

   var originalAddClassMethod = jQuery.fn.addClass;
        $.fn.addClass = function(){
        var result = originalAddClassMethod.apply( this, arguments );
        jQuery(this).trigger('cssClassChanged');
        return result;
    }


    $('.customers_comment li').bind('cssClassChanged', function(){ 
        var id = $('.customers_comment li.act').attr('data-id');
        $('.customers_comment .dots a[href="#'+id+'"]').addClass(act).siblings('a').removeClass(act) 
        clearTimeout(timeout_id);
     })
})

Answer 2

You have declared timeout_id as a local variable inside the dom ready handler so it is not accessible outside that dom ready handler, so declare it outside of the dom ready handler if you want to use it in a different scope

var timeout_id;
$(document).ready(function () {

    timeout_id = setInterval(function () {
        next()
    }, 5000)
})

---

I would recommend moving the event registration code also to the dom ready handlre

$(document).ready(function () {
    var timeout_id = setInterval(function () {
        next()
    }, 5000);

    $('.customers_comment li').bind('cssClassChanged', function () {
        var id = $('.customers_comment li.act').attr('data-id');
        $('.customers_comment .dots a[href="#' + id + '"]').addClass(act).siblings('a').removeClass(act)
        clearTimeout(timeout_id);
    });
});

var originalAddClassMethod = jQuery.fn.addClass;
$.fn.addClass = function () {
    var result = originalAddClassMethod.apply(this, arguments);
    jQuery(this).trigger('cssClassChanged');
    return result;
}