setTimeout работает в моем цикле javascript слайд-шоу на некоторое время, затем перестает задерживаться - PullRequest
Новая
       44

setTimeout работает в моем цикле javascript слайд-шоу на некоторое время, затем перестает задерживаться

2 голосов
/ 15 июля 2011

Мое слайд-шоу прошло несколько итераций, но никогда не избавлялось от этой проблемы.Он будет работать некоторое время, как и ожидалось, а затем внезапно начнет переключать слайды без какой-либо задержки.Если бы не анимация, она бы работала со скоростью света ...

HTML: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 
        <meta name="Description" content="Calvary Chapel Chico is a non-denominational,Bible-believing church established to worship,glorify,and share the good news of our Lord and Savior,Jesus Christ." /> 
        <title>Calvary Chapel Chico</title>
        <!--<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold"/>-->
        <link rel="stylesheet" type="text/css" href="style.css"/>
    </head>
    <body>
        <div id="Top450">
            <div id="TitleBar">
                <div id="Logo"></div>
                <h1>Calvary Chapel Chico</h1>
                <a id="Login" href="">Login</a>
            </div>
            <div id="SlideShow">
                <div id="Banner">
                    <div id="SMedia">Insert Media Links Here</div>
                    <div id="SMinistries">Insert Ministry links Here</div>
                    <div id="SServiceTimes">Insert Service Times Here</br><div style="background:#fff;">TEST</div></div>
                    <div id="SWelcome">Welcome to</br><span id="WelcomeText">Calvary Chapel Chico Online</span></div>
                    <a id="S5" href="2.html">2</a>
                    <a id="S6" href="2.html">3</a>
                    <a id="S7" href="2.html">4</a>
                </div>
            </div>
            <div id="MenuBar">
                <div class="Pages">
                    <a id="Home" href="2.html" class="current">Home</a>
                    <a id="About" href="2.html">About</a>
                    <a id="Media" href="#" rel="1" class="SlidePage">Media</a>
                    <a id="Ministries" href="#" rel="2" class="SlidePage">Ministries</a>
                    <a id="ServiceTimes" href="#" rel="3" class="SlidePage">Service Times & Directions</a>
                </div>
                <div class="BannerButtons">
                    <a href="#" rel="4"></a>
                    <a href="#" rel="5"></a>
                    <a href="#" rel="6"></a>
                    <a href="#" rel="7"></a>
                </div>
            </div>
        </div>
        <div id="Body">
            <div id="Left300">
                <div id="LeftTopTabs" class="Tabs">
                    <div id="LeftTopTabBar" class="TabBar">
                        <a href="#LTT-1">News</a>
                        <a href="#LTT-2">Media</a>
                        <a href="#LTT-3">Calendar</a>
                    </div>
                    <div id="LeftTopPanes" class="Panes">
                        <div id="LTT-1">Lorem ipsum dolor sit amet</div>
                        <div id="LTT-2">Nunc in tempor sem.</div>
                        <div id="LTT-3">Sed diam nisl,</div>
                    </div>
                </div>
            </div>
            <div id="Right700">
                Lorem ipsum dolor sit amet 
            </div>
        </div>
        <div id="Bottom450">
        </div>
    </body>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="scripts.js"></script>
</html>

javascript: 

$(
    function() {

//===================================================================================================================================
//Setup
//===================================================================================================================================

//Initialize variables
        var Pause
        var NextSlide
        var RepeatTimer
        var SlideshowTimer
        var $CurrentSlide

//Slideshow setup
        $(".BannerButtons a:first").addClass("current");//Force the first slide's button to be the "CurrentSlide"
        $(".BannerButtons").show();
        var SlideWidth=$("#SlideShow").width();
        $("#Banner").css({'width':[SlideWidth*[$("#Banner>*").size()]]});

//Tabs setup
        var $CurrentTab=$(".TabBar a:first").next();

//===================================================================================================================================
//Slideshow Functions
//===================================================================================================================================

//Move to the Next Slide
        NextSlide=function(){
            var image_reelPosition=[$CurrentSlide.attr("rel")-1]*SlideWidth;//Computes distance to the left edge of the slide in pixels
            $(".BannerButtons a,.SlidePage").removeClass("current");//Make the old "CurrentSlide" no longer the "CurrentSlide"
            $("#Banner").animate({left:-image_reelPosition},900);//Next slide animation
            $CurrentSlide.addClass("current");//Make the new "CurrentSlide" current
        };

//Repeat slide changes
        RepeatTimer=function(){
            $CurrentSlide=$('.BannerButtons a.current').next();//Make the next "CurrentSlide" current
            if($CurrentSlide.length===0){$CurrentSlide=$('.BannerButtons a:first');};//If end of buttons is reached, go back to the beginning
            NextSlide();//Go to the next slide
            SlideshowTimer();
        };

//Repeat slide changes every 10 seconds
        SlideshowTimer=function(){
            clearTimeout(Pause);//Clear the timer
            Pause=setTimeout(RepeatTimer,10000);//Reset the timer
        };

//Hover
        $("#Banner").hover(
            function(){//Hover trigger
                clearTimeout(Pause);//Clear the timer
            },function(){//Cease to hover trigger
                Pause=setTimeout(RepeatTimer,2000);//Reset the timer
        });

//Click
        $(".BannerButtons a,.SlidePage").click(
            function(){
                $CurrentSlide=$(this);//Make the clicked object the "CurrentSlide"
                clearTimeout(Pause);//Clear the timer
                NextSlide();//Go to the clicked slide
                SlideshowTimer();//Reset the timer
                return false;//Keep the # out of the URL
            }
        );

//===================================================================================================================================
//Tab Functions
//===================================================================================================================================

//Move to the clicked tab
        ChangeTab=function(){
            $(".TabBar>a").removeClass("current");
            $CurrentTab.addClass("current");//Force the first slide's button to be the "CurrentTab"
            $CurrentPane=$($CurrentTab.attr("href"));
            $(".Panes>div").addClass("HiddenPane");
            $CurrentPane.removeClass("HiddenPane");
        };

//Click
        $(".TabBar>a").click(
            function(){
                $CurrentTab=$(this);//Make the clicked object the "CurrentSlide"
                ChangeTab();//Go to the clicked tab
                return false;//Keep the # out of the URL
            }
        );

//===================================================================================================================================

//Start Slide Show
        SlideshowTimer();

//Initialize Tabs
        ChangeTab();

//END
    }
);

Ответы [ 2 ]

1 голос
/ 18 июля 2011

Нашли это!Оказывается, это была проблема браузера / Javascript.Я не понимал, как jQuery ставит в очередь все анимации по умолчанию.

Итак, во-первых, страница загружена, все было хорошо.Нет проблем со временем.Затем я перехожу на другую вкладку и оставляю свою страницу открытой.Вот откуда это происходит.Браузер каким-то образом блокирует jQuery от анимации анимации (хотя и не сразу) с изменениями CSS, когда это необходимо.Но в то же время таймер Javascript продолжает работать.Все это время jQuery строит очередь невыполненных анимаций.Когда вы снова откроете вкладку браузера, у jQuery будет свой путь, и он начнет запускать всю анимацию в очереди вплотную.В этот момент скрипт таймера все еще выполняется, но он только добавляет изменения в очередь.И поэтому кажется, что таймер вышел из строя.

ИСПРАВЛЕНИЕ

Я изменил: 

$("#Banner").animate({left:-image_reelPosition},900);//Next slide animation

на: 

$("#Banner").stop().animate({left:-image_reelPosition},900);//Next slide animation

И это все, jQuery знает, что построение очереди нежелательно для некоторых анимаций, поэтому оно включает исправление.

0 голосов
/ 15 июля 2011

Одна вещь, которую я вижу, это то, что вы звоните clearTimeout(Pause) много, не зная, является ли Pause действительным и активным timerID. Во многих случаях вы вызываете его со старым таймером, который давно завершился (и, следовательно, больше не действителен). ОС может это терпеть, но с другой стороны это может вызвать некоторые проблемы.

Обычно решение этой проблемы состоит в том, чтобы устанавливать переменную timerID на ноль всякий раз, когда срабатывает таймер или вы очищаете таймер, а затем проверяете на ноль перед вызовом clearTimeout.

Кроме того, как сказал nnnnnn в своем комментарии, при наведении мыши на слайд-шоу время таймера будет уменьшено с 10 до 2 секунд. Если бы у вас была 2-секундная анимация, это было бы почти все время.

Я бы рекомендовал сделать функцию для установки таймера слайда и функцию для очистки таймера слайда, а затем вы можете централизованно управлять как идентификатором таймера, так и временем, на которое установлен таймер.

Я предполагаю, что основной проблемой является 2-секундная проблема при наведении, но вы должны также очистить свое управление timerID.

...