CODEWITHSUNDEEP
javascriptjqueryhtmlsettimeout
Zword
Zword

Reputation: 6793

setTimeout() - Improper output in division Slider

I have created this following fiddle:

http://jsfiddle.net/kzQFQ/76/

It shows proper display when I do not select the slide manually, it automatically changes the slides on the basis of setTimeout. But when I select one slide out of the three slides (in the fiddle) by clicking on the below three dots it causes improper output display. I know the problem is caused because of other Timeouts which are left. I have tried using clearTimeout but didn't work.

Please help.

Following is the code:

var check=0;
var Wwidth=$(window).width()-9;

$(document).ready(function () {
$('.contentContainer').css({'width':''+Wwidth+'px'});

$('.three').click(function () {
    $('.container').animate({
        'left': '-1120px'
    });
    clearTimeout(timer);
    var timer=setTimeout(function () {$('.one').click();}, 6000);
}); 

$('.two').click(function () {
    $('.container').animate({
        'left': '-560px'
    });
    clearTimeout(timer);
    var timer=setTimeout(function () {$('.three').click();}, 6000);
});    

$('.one').click(function () {
    $('.container').animate({
        'left': ''+0+'px'
    });
    clearTimeout(timer);
    var timer=setTimeout(function () {$('.two').click();}, 6000);
});  
var timer=setTimeout(function () {$('.two').click();}, 6000);
});

Upvotes: 1

Views: 194

Answers (1)

klarki
klarki

Reputation: 915

the variables timer you are using are local, so when you call clear they are undefined.

Add var timer in a global scope so that it will be a global variable and you will be able to clear timeouts then.

you can do it in the first line like this:

var timer;
var check=0;
var Wwidth=$(window).width()-9;

and remove var from var timer = in the other lines.

EDIT:

like this:

timer=setTimeout(function () {$('.one').click();}, 6000);

Upvotes: 3

Related Questions