javascript - 如何从一个函数调用clearInterval()方法来停止另一个函数中的setInterval()方法

Question

所以我基本上使用一些基本的交叉淡入淡出创建幻灯片，下面是我当前使用的脚本

脚本:

  $(document).ready(function(){
        var slide = function(){
                                var active = $('.active');
                                var next = (active.next().length > 0) ? active.next() : $('#slide:first');
                                next.css('z-index',2);
                                active.fadeOut(1000,function(){// fade out the active image
                                                                active.css('z-index',1).show().removeClass('active');
                                                                next.css('z-index',3).addClass('active');
                                });
                              }
        setInterval(slide,2000)
  });

正如您所看到的，上面的脚本每 2 秒就会交叉淡入淡出一个图像列表。现在我想做的是当用户单击 previous image 按钮或 时停止幻灯片放映(即使用 clearInterval(Interval id) ) >下一张图片按钮，但它似乎不起作用。我尝试过 w3schools.com 等的示例，但无济于事

<小时/>

更新

完整脚本以防有任何疑问

  $(document).ready(function(){
        var slide = function(){
                                var active = $('.active');
                                var next = (active.next().length > 0) ? active.next() : $('#slide:first');
                                next.css('z-index',2);
                                active.fadeOut(1000,function(){// fade out the active image
                                                                active.css('z-index',1).show().removeClass('active');
                                                                next.css('z-index',3).addClass('active');
                                });
                              }
        setInterval(slide,2000)
  });

  //------------on click of next or prev-------
  //next
  $(".next").click(function(){
          window.clearInterval(slide_timer);//stop the auto slide

          var active = $('.active');
          var next = (active.next().length > 0) ? active.next() : $('#slide:first');
          next.css('z-index',2);
          active.fadeOut(1000,function(){// fade out the active image
                                          active.css('z-index',1).show().removeClass('active');
                                          next.css('z-index',3).addClass('active');
          });
  });
  //prev will be the same as next as soon as the stopping slide show problem is solved

Answer 1

将间隔引用拉至更高级别的范围。

var slideInterval;

function triggerTimer(){
    slideInterval= setInterval(slide,2000);
}

function cancelTimer(){
    clearInterval(slideInterval);
}