jQuery setInterval()에 문제가 있습니까?

Question

jQuery로 이미지 슬라이더를 만들었습니다. 7000 밀리 초의 간격으로 이미지를 슬라이드하도록 설정됩니다. 때로는 때로는 슬라이더가 이미지를 초고속으로 (슬라이드간에 약 1 초 간격으로) 슬라이드하는 것처럼 보입니다. 나는 원인을 집어 넣을 수 없다. 도와주세요! 슬라이더 사이트에

링크 : http://healthyhometech.com

function slider() { 
     $(".paging").hide(); 
     $(".paging a:first").addClass("active"); 

     var imageWidth = $(".window").width(); 
     var imageSum = $(".image_reel img").size(); 
     var imageReelWidth = imageWidth * imageSum; 

     $(".image_reel").css({'width' : imageReelWidth}); 

     rotate = function(){ 
      var triggerID = $active.attr("rel") - 1; 
      var image_reelPosition = triggerID * imageWidth; 

      $(".paging a").removeClass('active'); 
      $active.addClass('active'); 

      $(".image_reel").animate({ 
      left: -image_reelPosition 
      }, 500); 

     }; 

     rotateSwitch = function(){ 
      play = setInterval(function(){ 
      $active = $('.paging a.active').next(); 
       if ($active.length === 0) { 
       $active = $('.paging a:first'); 
      } 

       rotate(); 
      }, 7000); //Timer speed 
     }; 

     rotateSwitch(); 

     $(".image_reel a").hover(function() { 
     clearInterval(play); 
     }, function() { 
     rotateSwitch(); 
     }); 


    }; 

Answer 1

setInterval에 중대한 문제가 있습니다. 메모리에 남아 있습니다! 따라서 테스트 할 때 페이지를 새로 고쳐서 동일한 프로 시저에 대해 다양한 setInterval을 생성 할 수 있으므로 가끔씩 (실제로 setInterval이 여러 번 발생 함) 실행되는 프로 시저가 더 빠릅니다.

var "my-interval"= setInterval을 사용하여 setInterval을 실행하기 전에 var가 "0"이 아닌지 확인하여 비슷한 문제를 해결할 수있었습니다. 그렇다면 그것을 죽이거나 전혀 다시 실행하지 마십시오 :

var myInterval; 
if (myInteval == undefined) myInterval = setInterval(function() { 
    ... 
    myInterval=12345; 
},..); 

Answer 2

코드의 아래 부분에 시간 값을 늘려보십시오은 :

$(".image_reel").animate({ 
     left: -image_reelPosition 
     }, 500); //Here increase the value 500 to a value suitable to you, for example 1000, 2000 etc. anything you like. 

값이 밀리 초이며 애니메이션 속도를 정의합니다.

내가 관찰 한 것과 [편집]

가 좋아, 난 당신이 탭에서 열린 웹 페이지를 떠나 다른 탭에서 작업을 계속하는 경우에만 빠른 슬라이딩 문제를 얻을 생각에, 당신은으로 돌아 탭이 포함되어 있으면 빠른 속도로 이미지를 슬라이드합니다. 그러나 당신이 탭에 머물러 있다면, 그것은 일어나지 않습니다. 내 생각 엔이 문제는 크롬 브라우저에서 발견되었습니다.

스크립트에는 문제가없는 것으로 보이지만 Chrome 브라우저가 작동하는 방식에만 문제가있는 것으로 보입니다. 백그라운드에서 탭을 남겨두면 크롬에서 setInterval() 함수를 일시 중지하고 페이지로 돌아 가면 배경에 있던 시간 동안 실행합니다. 이것은 아마도 Chrome 브라우저가 작동하는 방식 일 것입니다. 코드에서 문제 없습니다.