触发setInterval在点击发生一次

triggering setInterval on click happens once

本文关键字：一次 setInterval 触发      更新时间：2023-09-26

我有一个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>
CSS代码:

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

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

两个问题:

  1. 你用的是timer2，而你应该用timer

  2. 你是调用 bgrepeat(bgpath)并将其返回值传递给setInterval，你不是将bgrepeat(bgpath)传递给setInterval:

    你可以这样做:

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

    Function#bind创建了一个新函数，当调用该函数时，它将使用给定的this值(第一个参数，我们可以使用null)和您给它的任何其他参数调用原函数。

    这是ES5的一个特性;如果你需要支持IE8这样的老引擎，可以搜索"Function bind shim"或"Function bind polyfill"来查找shim/polyfill。

相关文章：