CODEWITHSUNDEEP
javascriptjquerysetinterval
Sohrab Taee
Sohrab Taee

Reputation: 760

triggering setInterval on click happens once

I have a div that its background-image changes every 5s, and I have a next button that should clear the setInterval timer and change the background to the next one and trigger the setInterval again but when I click the next button, it changes the background to the next one, but does not trigger the setInterval again.

HTML Code:

<div id="slideshow">
</div>
<a href="" id="arrow_right"><i class="fa fa-angle-right"></i></a>

CSS Code:

#slideshow {
    height:100%;
    width:100%;
    background: url(../css/img/bg/slide1.jpg) no-repeat;
    background-position: center center;
    background-size: cover;
}

JS Code:

$(document).ready(function() {
    var i = 1;
    function bgrepeat(x){
        if(typeof(x)==='undefined') {
            $('#slideshow').fadeOut(500, function () {
                $('#slideshow').css('background-image','url(ui/css/img/bg/slide' + i + '.jpg)');
                $('#slideshow').fadeIn(500);
            });
            i++;
            if(i == 5) {
                i = 1;
            }
        } else {
            $('#slideshow').fadeOut(500, function () {
                $('#slideshow').css('background-image','url(ui/css/img/bg/slide' + x + '.jpg)');
                $('#slideshow').fadeIn(500);
            });
            x++;
            if(x == 5) {
                x = 1;
            }
        }
    };
    var timer = setInterval(bgrepeat , 5000);

    var bg = $('#slideshow').css('background-image');
    bg = bg.split('slide');
    var bgpath = bg[1];
    bgpath = bgpath.replace('.jpg")','');
    bgpath = parseInt(bgpath,10);

    $('#arrow_right').click(function(e) {
        e.preventDefault();
        bgpath++;
        if(bgpath == 5) {
            bgpath = 1;
        }
        $('#slideshow').fadeOut(500, function () {
            $('#slideshow').css('background-image','url(ui/css/img/bg/slide' + bgpath + '.jpg)');
            $('#slideshow').fadeIn(500);
        });
        clearInterval(timer);
        timer2 = setInterval(bgrepeat(bgpath) , 5000);
    });
});

Upvotes: 0

Views: 189

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074148

Two issues:

  1. You're using timer2 where you should probably be using timer.

  2. You're calling bgrepeat(bgpath) and passing its return value into setInterval, you're not passing bgrepeat(bgpath) into setInterval:

    You can do the latter like this:

    timer = setInterval(bgrepeat.bind(null, bgpath), 5000);

    Function#bind creates a new function that, when called, will call the original function with a given this value (the first argument, we can just use null) and any further arguments you give it.

    It's an ES5 feature; if you need to support really old engines like IE8's, search for "Function bind shim" or "Function bind polyfill" to find shims/polyfills.

Upvotes: 1

Yury Tarabanko
Yury Tarabanko

Reputation: 45121

You need to pass a function to setInterval not the result of its invocation.

timer2 = setInterval(function() {
    bgrepeat(bgpath) 
}, 5000);

Upvotes: 1

Related Questions