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的函数无法访问它们。

使用clearTimeout中断setTimeout

2 个答案: