使用clearTimeout中断setTimeout

Question

我正在自定义图片库中切换背景图片（使用toggleClass）。 画廊功能循环良好。

我试图通过单击.leftArrow添加向后（然后向后向前）的功能。 我似乎无法获得clearTimeout来实际停止超时，但是我感觉自己在某个地方犯了一个菜鸟错误，但我似乎无法弄清楚。

我认为问题区域位于点击评论的中断下。

HTML

<!-- Gallery Images -->
<div id="heroes" class="heroThree">
    <div class="heroOne hero visible"></div>   
    <div class="heroTwo hero hide"></div> 
    <div class="heroThree hero hide"></div> 
</div> 

<!-- Arrows -->
<div class="leftArrow"><i class="fa fa-arrow-left"></i></div>

jQuery的

//GALLERY ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var gallCheck = 1;
var check = true;

function gallery() { 

if (check == true){ 
    if (gallCheck == 0) {  
        var idOne = setTimeout(function() {
            gallCheck++;
            gallery();
            },7000);
        $('.heroOne, .heroThree').toggleClass('hide').toggleClass('visible');//toggle background
        $('.selectorThree, .selectorOne').toggleClass('fa-circle').toggleClass('fa-circle-o'); //toggle Circles
        idOne;

    }
    else if (gallCheck == 1) {
        var idTwo =  setTimeout(function() {
            gallCheck++;
            gallery();
            },7000);   
        $('.heroOne, .heroTwo').toggleClass('hide').toggleClass('visible');
        $('.selectorTwo, .selectorOne').toggleClass('fa-circle').toggleClass('fa-circle-o');
        idTwo;

    }
    else if (gallCheck == 2) {
        var idThree = setTimeout(function() {
            gallCheck = 0;
            gallery();
            },7000);
        $('.heroTwo, .heroThree').toggleClass('hide').toggleClass('visible');
        $('.selectorThree, .selectorTwo').toggleClass('fa-circle').toggleClass('fa-circle-o');
        idThree;
    } 
}

}


//INTERRUPT ON CLICK ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


$(".leftArrow").on( "click" , function() {
    var check = false;
    if (gallCheck == 0) { 
        clearTimeout(idOne);
        gallCheck =2;
        var check = true;
        gallery();
    }
    else if (gallCheck == 1){
        clearTimeout(idTwo);
        gallCheck--;
        var check = true;
        gallery();
    }
    else if (gallCheck == 2){
        clearTimeout(idThree);
        gallCheck--;
        var check = true;
        gallery();
    }
});

编辑

代码是固定的。 更新：

//GALLERY ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var gallCheck = 1;
var check = true;
var idOne = setTimeout(function() {
            gallCheck++;
            gallery();
            },7000);
var idTwo =  setTimeout(function() {
            gallCheck++;
            gallery();
            },7000); 
var idThree = setTimeout(function() {
            gallCheck = 0;
            gallery();
            },7000);

function gallery() { 

if (check === true){ 
    if (gallCheck === 0) {  

        $('.heroOne, .heroThree').toggleClass('hide').toggleClass('visible');//toggle background
        $('.selectorThree, .selectorOne').toggleClass('fa-circle').toggleClass('fa-circle-o'); //toggle Circles
        idOne;

    }
    else if (gallCheck == 1) {

        $('.heroOne, .heroTwo').toggleClass('hide').toggleClass('visible');
        $('.selectorTwo, .selectorOne').toggleClass('fa-circle').toggleClass('fa-circle-o');
        idTwo;

    }
    else if (gallCheck == 2) {

        $('.heroTwo, .heroThree').toggleClass('hide').toggleClass('visible');
        $('.selectorThree, .selectorTwo').toggleClass('fa-circle').toggleClass('fa-circle-o');
        idThree;
    } 
}

}


//INTERRUPT ON CLICK ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


$(".leftArrow").on( "click" , function() {
    check = false;
    if (gallCheck === 0) { 
        clearTimeout(idOne);
        gallCheck =2;
        check = true;
        gallery();
    }
    else if (gallCheck === 1){
        clearTimeout(idTwo);
        gallCheck--;
        check = true;
        gallery();
    }
    else if (gallCheck === 2){
        clearTimeout(idThree);
        gallCheck--;
        check = true;
        gallery();
    }
});

Answer 1

您必须在全局范围内声明idOne idTwo和idThree，否则在下面的清除方法中将无法访问它们

Answer 2

您的idOne idTwo idThree变量是局部变量，使用clearTimeouts函数无法访问它们。