Баг в слайдере, при переключение вкладок браузера?

Question

Derick Wire @mmetro

JavaScript

Баг в слайдере, при переключение вкладок браузера?

Такая проблема, если перейти на другую вкладку в браузере, а затем вернуться на вкладку со слайдером, он становиться бешеным и лестается с бешенной скоростью, и его не остановить, даже mouseenter не срабатывает, вот скрипт:

var slideWidth=1000;
var sliderTimer;
$(function(){
$('.slide:first .slidetext div').show();
$('.slidewrapper').width($('.slidewrapper').children().size()*slideWidth);
    sliderTimer=setInterval(nextSlide,3000);
    $('.viewport').hover(function(){
        clearInterval(sliderTimer);
    },function(){
        sliderTimer=setInterval(nextSlide,3000);
    });
    $('#next_slide').click(function(){
        clearInterval(sliderTimer);
        nextSlide();
        sliderTimer=setInterval(nextSlide,3000);
    });
    $('#prev_slide').click(function(){
        clearInterval(sliderTimer);
        prevSlide();
        sliderTimer=setInterval(nextSlide,3000);
    });
});
$(".viewport").mouseenter(function () {
			    clearInterval(theInt);
			}).mouseleave(function () {
			    theInterval();
			});            

function nextSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide++;
    if(currentSlide>=$('.slidewrapper').children().size())
    {
        currentSlide=0;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},500,function(){
        //скрываем отыгранные тексты на всех слайдах
        $('.slide .slidetext div').hide();
        //отыгрываем эффект для текста на текущем слайде
        $('.slide:eq('+currentSlide+') .slidetext div').each(function(){
            $(this).show();
            $(this).data('width',$(this).width());
            $(this).css({overflow: 'hidden',width: 0}).animate({width: $(this).data('width')},500);
        });
    }).data('current',currentSlide);
}

function prevSlide(){
    var currentSlide=parseInt($('.slidewrapper').data('current'));
    currentSlide--;
    if(currentSlide<0)
    {
        currentSlide=$('.slidewrapper').children().size()-1;   
    }
    $('.slidewrapper').animate({left: -currentSlide*slideWidth},500,function(){
        //скрываем отыгранные тексты на всех слайдах
        $('.slide .slidetext div').hide();
        //отыгрываем эффект для текста на текущем слайде
        $('.slide:eq('+currentSlide+') .slidetext div').each(function(){
            $(this).show();
            $(this).data('width',$(this).width());
            $(this).css({overflow: 'hidden',width: 0}).animate({width: $(this).data('width')},500);
        });
    }).data('current',currentSlide);
}

и хтмл

<div class="viewport">
    <ul class="slidewrapper" data-current=0>
        <li class="slide">
			<div class='slidetext'>
				<div>::текст</div>
				<div>/ текст</div> 
				<div>текст</div>  
			</div>
			<a href="#"><img src="images/img-1.jpg"></a>
        </li>
        <li class="slide">
			<div class='slidetext'>
				<div>::текст</div>
				<div>/ текст</div> 
				<div>текст</div>  
			</div>
            <a href="#"><img src="images/img-2.jpg"></a>
        </li>
        <li class="slide">
			<div class='slidetext'>
				<div>::текст</div>
				<div>/ текст</div> 
				<div>текст</div>  
			</div>
            <a href="#"><img src="images/img-3.jpg"></a>
        </li>
    </ul>
<a href='javascript: void(0)' id='prev_slide' class='prev_s'></a>
<a href='javascript: void(0)' id='next_slide' class='next_s'></a>
</div>