在 $(document).ready 函数中停止 JQuery 函数

Question

我有一个 JQuery 滑块，它会在页面加载时自动启动。我还有可用的 next（nextSlide 函数）和 previous（prevSlide 函数）按钮。我想要完成的是这个......我想在 $('#next').on('click',nextSlide); 或 $('#prev').on('click',prevSlide); 被激活时停止 'autoSwitch'。

换句话说，自动切换在页面加载时起作用，但在用户单击 'next' 或 'previous' 按钮后立即停止。

$(document).ready(function() {
var autoSwitch = true;          // auto slider
var autoswitch_speed = 4000;    // auto slider speed

// Add initial active class
$('.slide').first().addClass('active');

// Hide slides
$('.slide').hide();

// Show first slide
$('.active').show();

// Next handler
$('#next').on('click',nextSlide);

// Previous handler
$('#prev').on('click',prevSlide);

// AutoSwitch handler
if (autoSwitch == true) {
    setInterval(nextSlide,autoswitch_speed);
}

// Switch to next slide
function nextSlide () {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':last-child')) {
        $('.slide').first().addClass('active');
    } else {
        $('.oldActive').next().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.slide').fadeOut(speed);
    $('.active').fadeIn(speed);
}

// Switch to prev slide
function prevSlide () {
    $('.active').removeClass('active').addClass('oldActive');
    if ($('.oldActive').is(':first-child')) {
        $('.slide').last().addClass('active');
    } else {
        $('.oldActive').prev().addClass('active');
    }
    $('.oldActive').removeClass('oldActive');
    $('.slide').fadeOut(speed);
    $('.active').fadeIn(speed);
}
});

Answer 1

当您运行 setInterval 存储对它的引用时：

var intervalID = setInterval(nextSlide,autoswitch_speed);

然后当您按下方向键时清除间隔：

$('#next, #prev').on('click', function(){
    clearInterval(intervalID);
});

（注意： 此 onclick 处理程序必须在您的 $(document).ready 函数内才能具有 intervalID 变量的范围）

在 $(document).ready 函数中停止 JQuery 函数

Stop JQuery function inside $(document).ready function

jquery

slideshow

document-ready