Question

我在jquery中有一个幻灯片放映功能，我希望在特定的点击事件上停止。幻灯片功能在这里：

function slider(){
   setInterval(function(){
   var cur = $('img.active');
   cur.fadeOut('fast');
   cur.removeClass('active');
   cur.css('opacity','0');
   cur.addClass("hidden");
   var nextimg;
   if (!cur.hasClass("last")){
     nextimg = cur.next("img");
     }
   else {
     nextimg = cur.prev().prev().prev();
  }
   nextimg.removeClass("hidden").fadeIn('slow').css('opacity','1').addClass('active');
  },5000);
 }

我一直在阅读关于.queue的内容但不确定如何完全使用它，我可以从队列调用我的函数然后在点击事件中清除队列吗？我似乎无法弄清楚如果可能的话，让它工作的语法。任何关于这个或另一种方法的建议，以阻止点击运行功能将不胜感激。

Answer 1

对于它的价值，通常建议使用递归的setTimeout而不是setInterval。我做了这个改变，以及一些小的语法调整。但这是我认为你想要的基本实现。

// Store a reference that will point to your timeout
var timer;

function slider(){
    timer = setTimeout(function(){
        var cur = $('img.active')
                .fadeOut('fast')
                .removeClass('active')
                .css('opacity','0')
                .addClass('hidden'),
            nextimg = !cur.hasClass('last') ? cur.next('img') : cur.prev().prev().prev();
        nextimg.removeClass('hidden')
            .fadeIn('slow')
            .css('opacity','1')
            .addClass('active');
        // Call the slider function again
        slider();
    },5000);
 }

$('#someElement').click(function(){
    // Clear the timeout
    clearTimeout(timer);
});

Answer 2

将setInterval的结果存储在变量中。

然后使用clearInterval来阻止它。

Answer 3

存储setInterval返回的值，说intervalId清除它，点击处理程序应如下所示：

function stopSlider() {
    //prevent changing image each 5s
    clearInterval(intervalId);
    //stop fading the current image
    $('img.active').stop(true, true);
}

在click事件中停止javascript / jquery中的运行函数

3 个答案: