How to restart the setInterval in jquery so that when the user Click the counter restarts?

Question

How to restart the setInterval in jquery so that when the user Click the counter restarts?

So i created a tabs section so that it will cycle to the next tab after 12 sec. However, I would like to restart time if the user clicks on a desired tab so that the user gets a new set of 12 sec.

I'm a novice in jquery so please explain thoroughly. Many Thanks.

$("li.tab").click(function () {


    $("li.tab").removeClass("select");
       $(".featured_content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
    $(activeTab).fadeIn(1600); //Fade in the active ID content
    $(this).addClass("select");





});

var refreshIntervalId = setInterval(function () {

    var lastChild = $('li.select').is(':last-child');

    if (lastChild) {

        $('li.tab').removeClass('select ')
        $("li.tab:first").addClass('select ');
        return false;

    } else {
        $("li.select").removeClass('select').next().addClass('select');
        return false;
    }

}, 12000);

Answer 1

Use clearInterval :

$("li.tab").click(function () {
    // ...
    refreshIntervalId = clearInterval(refreshIntervalId);
    // setInterval again to re-start the 'timer'
    // ...
});

Answer 2

//Stop
clearInterval(refreshIntervalId);

//Start again
setInterval(function () {
  ...
}, 12000)