call EventListener with setInterval()

Question

My task is to make a few pictures in a slideshow and if don't click a button for forward and back (id = right and id = left in my code) in 5 seconds it should automaticly move forward , i succeeded but i feel that the code is to much.

var counter = 1;
$('#left').on('click', function peter() {
    clearInterval(time);
    time = setInterval(function () {
        var id = '#' + counter;
        $(id).attr('class', 'hidden');
        counter++;
        if(counter === 4){
            counter = 1;
        }
        id = '#' + counter;
        $(id).attr('class', 'visible');
    },3000);

    var id = '#' + counter;
    $(id).attr('class', 'hidden');
    counter--;
    if (counter === 0) {
        counter = 3;
    }
    id = '#' + counter;
    $(id).attr('class', 'visible');
});

$('#right').on('click', function () {
    clearInterval(time);
    time = setInterval(function () {
        var id = '#' + counter;
        $(id).attr('class', 'hidden');
        counter++;
        if(counter === 4){
            counter = 1;
        }
        id = '#' + counter;
        $(id).attr('class', 'visible');
    },3000);

    var id = '#' + counter;
    $(id).attr('class', 'hidden');
    counter++;
    if(counter === 4){
        counter = 1;
    }
    id = '#' + counter;
    $(id).attr('class', 'visible');
});


var time = setInterval(function peter() {
    var id = '#' + counter;
    $(id).attr('class', 'hidden');
    counter++;
    if(counter === 4){
        counter = 1;
    }
    id = '#' + counter;
    $(id).attr('class', 'visible');
},3000); 

So the problem as you can see is that i pretty much decleared my setInterval() 3 times, 1st in my code and then i declear it every time in my eventListeners to reset it. My question is this: Is there any way to declear it once and call the eventListeners like time(call listnener for id='right') and then in the event listners to just reset it like clearInterval(a) ; without having to retype it.

Answer 1

var counter = 1;
var time;
function intervalFunction(offset)
{
      var id = '#' + counter;
      $(id).attr('class', 'hidden');
      counter += offset;
      if(counter > 4)
          counter = 1;
      else if(counter < 1)
         counter = 4;
      id = '#' + counter;
      $(id).attr('class', 'visible');
}

function startInterval(offset){
    if(time)
        clearInterval(time);
    intervalFunction(offset);
    time = setInterval(function () {
       intervalFunction(1);
    },3000);
}
$('#left').on('click', function peter() {
   startInterval(-1);
});

$('#right').on('click', function () {
    startInterval(1);
});

startInterval(1);

Answer 2

I'm not sure if this would do it. Didn't actually test it first. But you could combine all of the redundant work into a single function that you would call. I added the clicktype parameter to the function and use it to determine if it should increment or decrement the value of counter.

I also modified the setInterval to setTimeout, as in this setup the call is cleared and reset each time anyway.

var counter = 1;
var timeoutdelay = 3000;

function OnChangeSlide(clicktype) {
    clearTimeout(time);
    var id = '#' + counter;
    $(id).attr('class', 'hidden');
    counter = counter + (clicktype=='#left' ? -1 : 1);
    if (counter === 0) {
        counter = 3;
    } else if (counter === 4) {
        counter = 0;
    }
    id = '#' + counter;
    $(id).attr('class', 'visible');
    time = setTimeout(function() { OnChangeSlide('#right'); }, timeoutdelay);
} 

$('#left').on('click', function() { OnChangeSlide('#left'); } );
$('#right').on('click', function() { OnChangeSlide('#right'); } );

time = setTimeout(function(){ OnChangeSlide('#right'); }, timeoutdelay);