JQuery баннер вращается слишком быстро, хотя setTimeout установлен на 10 секунд - PullRequest
Новая
       16

JQuery баннер вращается слишком быстро, хотя setTimeout установлен на 10 секунд

2 голосов
/ 10 февраля 2012

Я создал простой вращающийся баннер для сайта, который я создал http://sandbox.worldwatchlist.us.

Все работало нормально, пока я не зашел на другую вкладку в своем браузере, а затем вернулся через несколько секунд ... баннер вращался каждые 0,5 секунды или меньше.

Понятия не имею, почему это происходит, тем более что я использовал setTimeout в javascript и установил его на 10 секунд (10000 мс).

Ниже приведен весь код в файле banner.js на сервере. Пожалуйста, укажите все, что решит эту проблему. Вы можете взглянуть на вышеуказанный веб-сайт или посмотреть на скриншот, который я сделал на http://www.youtube.com/watch?v=HWb2uc6KpFM. У каждого браузера есть эта проблема, которую я тестировал.

Я искал повсюду ответ на «баннер jquery, вращающийся слишком быстро», и не нашел ответа, чтобы решить мою проблему, кроме «использовать setTimeout». 

var banner_width = 960;
var default_pos = 0;
var current_pos = 0;
var next_pos;
var speed = 500;
var banner_tot; //number of banners
var current_num = 1; //current banner number

    $(function(){

        banner_tot = $(".banner_item").length;
        $(".banner_slider").css({width:(banner_tot*banner_width)});

        setTimeout( "slide()", 10000 );
    });


    function slide(){
        if(current_num==(banner_tot)){
            next_pos= 0;
            $(".banner_slider").animate({left: next_pos}, speed);
            current_num=1;

            setTimeout( "slide()", 10000 );
        }
        else{
            next_pos= current_num*(-banner_width);
            $(".banner_slider").animate({left: next_pos}, speed);
            current_num++;

            setTimeout( "slide()", 10000 );
        }
    }

1 Ответ

5 голосов
/ 10 февраля 2012

То, что вы наблюдаете, - это наращивание анимации.Когда вы переключаетесь на другую вкладку в вашем браузере, анимации помещаются в очередь, а когда вы возвращаетесь на исходную вкладку, все они воспроизводятся последовательно.

Для получения дополнительной информации посмотрите http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup.

...