Javascript 单击时触发setInterval只发生一次

我有一个div，它的背景图像每5秒改变一次，我有一个next按钮，可以清除setInterval计时器，将背景更改为下一个，然后再次触发setInterval 但当我单击next按钮时，它会将背景更改为下一个，但不会再次触发setInterval

HTML代码：

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

JS代码：

$(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);
    });
});

---

您需要将函数传递给

setInterval

而不是其调用的结果

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

两个问题：

您使用的是

timer2

，您可能应该使用

timer

您正在调用

bgpeat（bgpath）

并将其返回值传递到

setInterval

，而不是将

bgpeat（bgpath）

传递到

setInterval

：

你可以这样做：

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

Function#bind

创建一个新函数，当调用该函数时，该函数将使用给定的

此

值（第一个参数，我们可以只使用

null

）和您提供的任何其他参数调用原始函数

这是ES5的一个特性；如果您需要支持像IE8这样的非常旧的引擎，请搜索“功能绑定垫片”或“功能绑定多填充”以查找垫片/多填充

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