javascript - 在哪里设置计数变量

我已经使用jQuery制作了这个简单的内容旋转器，但效果很好，但是如您所见，我制作了mouseenter函数，以便将鼠标置于旋转器上时旋转器停止。

我的问题是，如果我通过鼠标进入并退出功能，则重新启动函数rotateReview（），并且计数变量（数字）为1。因此，我的旋转器会自动从头开始，然后继续下一个。

HTML：

<div id="review_rotator">
   <div class="rotator">
      <article>Content</article>
      <article>Content</article>
      <article>Content</article>
      <article>Content</article>
   </div><!--End .rotator-->
</div><!--End #review_rotator-->

jQuery的

function rotateReview() {
    var turn = $('#review_rotator article');
    var numbers = turn.length;
    var number = 1;
    intv = setInterval(function() {
        number++;
        turn.fadeOut(300);
        $('#review_rotator article:nth-child('+number+')').fadeIn(200);
        if(numbers == number)
            number = 0;
    }, 4500)
}
rotateReview();

$(document).on('mouseenter mouseleave', '#review_rotator article', function(e) {
    var mEnt = e.type == 'mouseenter';
    if(mEnt) {
        clearInterval(intv);
    } else {
        rotateReview();
    }
})

最佳答案

每次运行rotateReview时，都会为变量number分配值1。因此，应将其存储在函数外部或其他位置，以免在函数number完成后释放变量rotateReview。 。

我将给出2个解决方案。

1.作为全局变量

var number = 1;

function rotateReview() {
    var turn = $('#review_rotator article');
    var numbers = turn.length;

    intv = setInterval(function() {
        number++;
        turn.fadeOut(300);
        $('#review_rotator article:nth-child('+number+')').fadeIn(200);
        if(numbers == number)
            number = 0;
    }, 4500)
}

2.存放在瓶盖中

如果您不喜欢全局变量，可以将其存储在闭包中，闭包是立即调用的函数。

var rotateReview  = (function () {
    var number = 1;

    return function () {
        var turn = $('#review_rotator article');
        var numbers = turn.length;

        intv = setInterval(function() {
            number++;
            turn.fadeOut(300);
            $('#review_rotator article:nth-child('+number+')').fadeIn(200);
            if(numbers == number)
                number = 0;
        }, 4500)
    }
}());