if else condition occurs after next pass with setInterval

Question

I'm trying to create a simple slideshow. Problem is with my if/else statement. I want it to add a class when my $base === 0 but it only applies after its determined that the value is 0.

Example when I console.log the $base.length, will go like this: 1, 1, 1, 1, 0, 1.

I don't want it to apply the class AFTER 0 has been declared, but at the same time. Not sure whats causing this. Is it a conflict with setInterval vs if/else?

          <ul class="slideshow">
                <li class="slideshow1  e-slide-on"></li>
                <li class="slideshow2"></li>
                <li class="slideshow3"></li>
                <li class="slideshow4"></li>
          </ul>


        function slideSwitch() {
            var $base = $('.slideshow li.e-slide-on');

            $base.next().addClass('e-slide-on');
            $base.removeClass('e-slide-on');

            if ($base.length === 0 ){
                $('.slideshow li:first').addClass('e-slide-on');
            } else{
                return;
            }
        }
       $(function() {
           setInterval( function(){slideSwitch()}, 1000 );
       });

For how to stop (clear) and interval, see: http://stackoverflow.com/questions/109086/stop-setinterval-call-in-javascript — blurfus, Dec 31 '14 at 14:47
Removing a class won't change the collection of elements created for `$base` — charlietfl, Dec 31 '14 at 14:50
AH HA! thanks anpsmn. I didn't consider that, and it worked. That you very much. — Brandon S, Dec 31 '14 at 14:52

score 1 · Accepted Answer · answered Dec 31 '14 at 14:58

1

I think you should be checking whether there is a next element instead of if you have one currently.

Try if($base.next().length === 0)

answered Dec 31 '14 at 14:58

jdepoix

475
1
4
11

if else condition occurs after next pass with setInterval

1 Answers1