Question

快速感谢那些到目前为止帮助我使用这个脚本的人，你们在学习javascript和jquery的一些更优雅的方面帮助了我。

我对这个脚本有一个最后的问题，我使用setinterval（）来循环一个图像转换器，JS / Jquerycode如下：

$(function() {
var rotateTimer = setInterval(rotateImg,15000);

$('#feature-links a').click(function() {
    if (!$(this).hasClass('a-active')) {
        clearInterval(rotateTimer);
        switchToImg($(this).attr('class'));

    }
});

function switchToImg(image) {
    var $featureImage = $('#feature-image');        
    $featureImage.fadeOut(200, function() {
        $featureImage.css('background-image', 'url(images/main_' + image + '.jpg)').fadeIn(200);
        $('#feature-detail div').removeClass('d-active').filter('.d' + image).addClass('d-active');
    });
    $('#feature-links a').removeClass('a-active').filter('.' + image).addClass('a-active');
};

function rotateImg() {
    var next = 'a' + (parseInt($('#feature-links a.a-active').attr('class').match(/[0-9]/))+parseInt(1));

    if (!$('#feature-links a').hasClass(next))
        next = 'a1';
    switchToImg(next);
}
});

此脚本适用于允许用户手动切换到图像的<a>标记的类名。除此之外，rotateImg()在setInterval()的帮助下每15秒提供一次自动图像/文本循环。

我遇到的问题是，一旦用户手动点击链接，setInterval()就会重新初始化。

在.click函数中，我清除间隔计时器，然后调用switchToImg()函数，并将被点击的<a>标记的类名作为变量传递。

我正在尝试弄清楚如何重新设置计时器以避免用户在循环结束时点击链接并立即切换到下一张图像。

我已经研究了将自己的回调函数构建到switchToImg()，这样一旦函数完成，定时器就会重置，理想情况下我最初需要更长的时间（例如30秒）但是重新回到15秒钟。然而，我的研究让我遇到了一堆不同的存储库，我很难做出头部或尾部。

关于如何在脚本中构建此功能的任何指导都将非常适用。谢谢你的时间。：）

Answer 1

我不是100％肯定我会按照您的要求进行操作，但如果您尝试做的是在用户点击后延迟一段时间后重新启动间隔计时器，那么您可以这样做：< / p>

$('#feature-links a').click(function() {
    if (!$(this).hasClass('a-active')) {
        clearInterval(rotateTimer);
        switchToImg($(this).attr('class'));
        setTimeout(function() {
            rotateTimer = setInterval(rotateImg, 15*1000);
        }, 15*1000);
    }
});

在15秒延迟后，您将使用一次性setTimeout()调用来重新启动间隔计时器。这样可以在点击后再次切换下一个图像之前15 + 15 = 30秒，然后每次15秒。

Answer 2

我不确定我是否正确理解了这个问题。但基本上我得到你想要防止计时器在用户点击后发生。不应该在switchToImg之后立即调用setInterval吗？它会在用户点击后每15秒调用一次switchToImg。

带有Jquery脚本的setInterval（）

2 个答案: