clearInterval없이 setInterval에서 타이머 재설정

Question

나는 5 초마다 setInterval을 사용하여 자동으로 이미지를 변경하는 간단한 슬라이드 쇼를 가지고 있습니다.

사용자는 이전 및 다음 링크를 사용하여 한 이미지에서 다른 이미지로 이동할 수도 있습니다.

사용자가 이전/다음 링크를 클릭하면 타이머가 인터럽트되지 않습니다. 예를 들어, 타이머가 3 초 동안 링크를 클릭하면 다음 이미지 만 2 초간 다시 표시되어 다시 변경됩니다 .

나는 clearInterval을 사용하고 setInterval을 다시 사용하여이 작업을 수행 할 수 있음을 알고 있지만 깨끗한 방법이 있습니까?

여기 당신이 그것을 필요로하는 경우에 내 코드입니다 :

//Move to next image every 10 seconds unless paused. 
var timeInterval = 5000; 
var featureSlide = window.setInterval(function() { nextFeature("next")}, timeInterval); 

$("a#feature-prev").click(function() {   
    nextFeature("prev"); 
    return false; 
}); 

$("a#feature-next").click(function() { 
    nextFeature("next"); 
    return false; 
}); 



function nextFeature(action) { 

    var idNow = $("ul#features li:visible").attr("id"); 
    var pos = idNow.replace("feature-", ""); 

    //If image is currently animated do nothing 
    //If this isn't in place then multiple images are displayed 
    if ($("li#" + idNow).is(":animated")) { 
     return; 
    } else { 

     if (pos == 4 && action == "next") { 
      pos = 1; 
     } else if (pos != 4 && action == "next") { 
      pos++; 
     } else if (pos !=1 && action == "prev") { 
      pos--; 
     } else if (pos == 1 && action == "prev") { 
      pos = 4 
     } 


     pos = "feature-" + pos; 
     // Slide to next image 
     $("li#" + idNow).hide("slide", { direction: "right" }, 1000, function() { 
      $("li#" + pos).show("slide", { direction: "left"}, 1000); 
     }); 


    } 
} 

감사합니다!

Answer 1

타이머를 취소하고 다시 시작하지 않고 다시 시작할 수는 없습니다.

또는 setInterval을 완전히 사용하지 않고 setTimeout 만 사용하면됩니다. 이미지를 표시 할 때마다 다음 코드를 예약하십시오 (바로 코드를 읽는다면 이 nextFeature에 있음). 그런 다음 간격 재설정은 특별한 것이 아니라 논리 흐름의 부산물로 발생합니다.