停止函数jquery

我有下面的代码来显示一系列图像，这些图像应该在同一个div中一个接一个地出现，然后消失

("div#start").click(function() {
   myFunction();        
});
var myFunction = function(){

  $('#samplePhoto7').removeClass ('hide-pic');
       setTimeout(function(){
        $('#samplePhoto7').addClass('hide-pic');
      },2000)
        setTimeout(function(){
        $('#samplePhoto6').removeClass('hide-pic');
      },2000)
        setTimeout(function(){
        $('#samplePhoto6').addClass('hide-pic');
      },4000)
      setTimeout(function(){
        $('#samplePhoto4').removeClass('hide-pic');
      },4000)
        setTimeout(function(){
        $('#samplePhoto4').addClass('hide-pic');
      },6000)
      setTimeout(function(){
        $('#samplePhoto3').removeClass('hide-pic');
      },6000)
  };  

---

我没有找到一种方法来添加一个停止按钮来暂时停止函数的运行。我想我应该使用.queue和.clearqueue，但我没有找到正确的方法来实现它。

您希望将

计时器作为
变量保留，以便在停止循环时清除它

你会想在这个基础上再接再厉，使它符合你的需要，但你得到了这个想法

$("div#start").click(function() {
    myFunction();        
});
var interval;
var myFunction = function(){
    var imgCount = 7;
    interval = setInterval(function(){
        $('#samplePhoto' + imgCount).addClass('hide-pic');
        imgCount--;
        $('#samplePhoto' + imgCount).removeClass('hide-pic');
        if(imgCount == 3){
            clearInterval(interval);
        }
    }, 2000);
};  
$('#stop_btn').on('click', function(){
    clearInterval(interval);
});

您可以尝试这种方法

首先声明要按特定顺序显示的图像列表（队列）。然后开始一个间隔并迭代这个列表

请注意，图4故意被排除在迭代之外


var队列=['1'、'2'、'3'、'5']；
无功定时器；
//起始间隔
$（'btnStart'）。在（'click'，function（）上{
计时器=设置间隔（函数（）{
moveNext（）；
}, 2000);
});
//停车间隔
$（'#btnStop'）。在（'click'，function（）{
清除间隔（计时器）；
});
函数moveNext（）{
var visible=$（'.image:visible'）；
var curId=visible.attr（'data-id'）；
visible.addClass（'hide-pic'）；
$（'.image[data id=“'+getNextId（curId）+''“]'））.removeClass（'hide-pic'）；
}
函数getNextId（curId）{
var index=queue.indexOf（curId）；
if（index==queue.length-1）{
返回队列[0]；
}
返回队列[索引+1]；
}
.image{
显示：内联块；
填充：50px；
背景色：#ececec；
}
.隐藏图片{
显示：无；
}

图1
图2
图3
图4
图5
开始
停止