使用clearTimeout中断setTimeout

我正在使用翻转背景图像的自定义画廊（使用toggleClass）。画廊功能循环良好。使用clearTimeout中断setTimeout

我试图通过单击.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(); 
    } 
});

EDIT

代码是固定的。更新：

//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(); 
    } 
});

来源

2015-06-30 Tom H

我认为它的超时变量范围问题。你的点击函数没有得到超时变量的值，试图使变量全局变为 – Newinjava

现在它正在中断，但它没有运行函数库（）;再次。这绝对是一个开始。谢谢！！ –

我不认为这与超时有关，调试你的代码，并发布，如果有任何错误。 – Newinjava

您必须声明IDONE idTwo和idThree在全球范围内，否则他们是不会低于

来源

2015-06-30 06:33:46 pinturic

现在正在制作clearTimeout作品，但它并未运行gallery（）;之后再次。绝对是一个进步，谢谢！ –

你idOne idTwo idThree变量是局部变量的结算方法访问，它们不与功能访问讲clearTimeouts。

来源

2015-06-30 06:33:51

现在正在使clearTimeout工作，但它不在运行gallery（）;之后再次。绝对是一个进步，谢谢！ –

使用clearTimeout中断setTimeout

回答

相关问题