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

also clearTimeout shouldn't work for this because it should be clearInterval see [this](http://stackoverflow.com/questions/9913719/are-cleartimeout-and-clearinterval-the-same) — Cayce K, Jun 17 '15 at 11:59
@CayceK its not that it won't work, it will work. The link you provided states that setInterval and setTimeout are not interchangeable. — Newinjava, Jun 17 '15 at 12:16
I guess I didn't read the whole thing. I still would not recommend using clearTimeout with setInterval. But that's just me. — Cayce K, Jun 17 '15 at 12:18

score 1 · Answer 1 · answered Jun 17 '15 at 11:47

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;
}

score 0 · Accepted Answer · answered Jun 17 '15 at 11:50

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);
     })
})

clearTimeout not working - setinterval problems

2 Answers2