ClearInterval() does not work immediately

[Sagarika_1]

I have a Carousel which uses the setInterval() to toggle between the tabs every 4 seconds. I now want to stop this auto-toggle on click of any particular tab.
The clearInterval() is getting called only after a cycle, and not immdetiately when a tab is selected.
Please point me to what is wrong in my function call.

jsfiddle.net/qjmDU/14 is the JS fiddle where I have my html and jquery. I am guessing that the problem is the following code being used in the wrong place.

$(this).on("click", function (event) {
   console.log("After clear interval" + stopVar);
   clearInterval(stopVar);    
});

[Troy III]

Your fiddle at (http://jsfiddle.net/qjmDU/14/) isn't doing anything.
Can you please provide a working example so that we can try fixing the delay you are having issues with?

[diafol]

There's no "toggle" / autoadvance in the jsfiddle example you gave (Chrome/Win 7)

The initial timeToStand is a problem...

$(document).ready(function ()
{
    initCarousel();
});

var stopVar;

function initCarousel(timeToStand)
{
    // Grab the tab links and content divs from the page
    var tabListItems = $('#tabsCarousel li');
    var selectedTab = $('#tabsCarousel').find('li.on');
    var index = $(selectedTab).index();
    var timeInMilliSecs = (timeToStand * 1000);

    alert(timeInMilliSecs);  

Gives NaN - so set

initCarousel(1);

Or however quickly (in seconds) it's supposed to advance

BUT, it still only advances to the next tab and then stops.

Also you have...

<div class="tabContentCarousel" id="advantages" onclick="showTabCarousel()">
  <div>
    <p>Advantages of tabs</p>    
  </div>
</div>

You're using jQuery, so you can get rid of inline js easily...

$('.tabContentCarousel').click(function(){
    showTabCarousel();
});

I haven't checked the rest of it...