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.

one clean fix is to merge the two click event handlers by $('#left, #right').... This will remove redundant code. — sudheer, May 10 '16 at 20:15

score 1 · Answer 1 · answered May 10 '16 at 20:12

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

answered May 10 '16 at 20:12

Simon Schüpbach

2,625
2
13
26

hi, when i test your script i get a flash, on every 4 calls in 1 direction i get copletely blank screen – Все Едно May 10 '16 at 20:20
My example is for 4 pictures, could this be your problem? – Simon Schüpbach May 10 '16 at 20:22
1

@SimonSchüpbach Don't just dump a bunhc of code. Explain what was wrong with the original, and what you changed to fix it. – Barmar May 10 '16 at 20:43
thank you for the answers, but i have to ask why did my topic got downvoted, i think i explained it good and the question wasn't stupid i mean topics like [max value of int32 ](http://stackoverflow.com/questions/94591/what-is-the-maximum-value-for-a-int32) get 1k up votes, and mine gets downvoted and i asked for some help with an algorithm for solving a problem, witch doesn't makes rly any sense to me – Все Едно May 11 '16 at 07:53
You are welcome, I'm not the one who downvote your question. I will upvote right now. – Simon Schüpbach May 11 '16 at 11:22

score 1 · Answer 2 · answered May 10 '16 at 20:30

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

call EventListener with setInterval()

2 Answers2