jQuery Ajax проблема цикла синхронизации с setInterval / onAnimationStopped, используя flipCounter - PullRequest
Новая
       1

jQuery Ajax проблема цикла синхронизации с setInterval / onAnimationStopped, используя flipCounter

3 голосов
/ 07 февраля 2012

У меня есть код согласно ниже.Это позволяет получить некоторые данные для счетчика, включая переменную для интервала перезагрузки - это НЕ используется ниже, чтобы исключить проблему с извлечением данных, вместо этого я жестко закодировал 10-секундный интервал, но проблема остается.

Все отлично работает при начальной загрузке страницы, а также в течение одного интервала, затем все идет наперекосяк, вызовы выполняются без задержки и счетчик не может реагировать до следующего вызова, как onAnimationStopped, так и setInterval, по-видимому,быть проигнорированным, что в конечном итоге приведет к полному зависанию.

Где-то происходит какой-то цикл, но, несмотря на траление в течение нескольких часов, ни один из найденных мной ответов, касающихся вызовов setInterval / Ajax, не отвечает на эту проблему.

Обратите внимание, что я также пробовал setTimeout, но он демонстрирует идентичное поведение.

Любая помощь приветствуется.

(в настоящее время тестируется только с использованием FF и Chrome - одна и та же проблема в обоих). 

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.flipCounter.1.2.js" type="text/javascript"></script>
</head>
<body>  
<div id="counter">
<input type="hidden" name="counter-value" value="0" />
</div> 
<script type="text/javascript">
    /* <![CDATA[ */
            jQuery(document).ready(doAjax());

                    function doAjax()
                    {   
                        jQuery.ajax({
                            async: false,
                            type: "POST",
                            url: "counterData.php",
                            dataType: "json",
                            cache: false,
                            success: function (data){
                                doTheCounter(data);
                                }
                        })
                    }

                    function doTheCounter(data)
                    {   

                        var scrollfromnumber = data.scrollfromnumber;
                        var displaynumber = data.displaynumber;
                        var reloadinterval = data.reloadinterval;

                        jQuery("#counter").flipCounter({
                            number: scrollfromnumber,
                            numIntegralDigits:6,
                            numFractionalDigits:0
                        });

                        jQuery("#counter").flipCounter("startAnimation", {
                            end_number: (displaynumber),
                            easing:jQuery.easing.easeInOutCubic,
                            duration:5000,
                            onAnimationStopped: function(){
                                setInterval(doAjax,10000);
                                }
                        });
                    }
        /* ]]> */
</script>
</body>
</html>

1 Ответ

1 голос
/ 07 февраля 2012

Не отправляйте ajax-запросы и не запускайте анимацию с setInterval, setInterval не допускает медленных браузеров / сетей или сбоев сетевого подключения. Вместо этого используйте setTimeout.

Также $(document).ready(doAjax()); должно быть $(document).ready(doAjax);

jQuery(document).ready(doAjax);

function doAjax() {
    jQuery.ajax({
        async: false,
        type: "POST",
        url: "counterData.php",
        dataType: "json",
        cache: false,
        success: function(data) {
            doTheCounter(data);
        }
    })
}

function doTheCounter(data) {

    var scrollfromnumber = data.scrollfromnumber;
    var displaynumber = data.displaynumber;
    var reloadinterval = data.reloadinterval;

    jQuery("#counter").flipCounter({
        number: scrollfromnumber,
        numIntegralDigits: 6,
        numFractionalDigits: 0
    });

    jQuery("#counter").flipCounter("startAnimation", {
        end_number: (displaynumber),
        easing: jQuery.easing.easeInOutCubic,
        duration: 5000,
        onAnimationStopped: function() {
            setTimeout(doAjax,10000);
        }
    });
}

Причина, по которой ваш код не работает с setInterval, заключается в том, что вы никогда не очищали предыдущий интервал, вы просто запускали новый каждый раз, поэтому сначала вы отправляли один запрос, затем 2, 4, 8, 16, 32, 64 и т. Д. До сбой браузера.

UPDATE: 

jQuery(document).ready(doAjax);

jQuery(document).ready(function(){
    jQuery("#counter").flipCounter({
        number: 0,
        numIntegralDigits: 6,
        numFractionalDigits: 0
    });
});   

function doAjax() {
    jQuery.ajax({
        type: "POST",
        url: "counterData.php",
        dataType: "json",
        cache: false,
        success: function(data) {
            doTheCounter(data);
        }
    })
}

function doTheCounter(data) {

    var scrollfromnumber = data.scrollfromnumber;
    var displaynumber = data.displaynumber;
    var reloadinterval = data.reloadinterval;

    jQuery("#counter").flipCounter("startAnimation", {
        end_number: (displaynumber),
        easing: jQuery.easing.easeInOutCubic,
        duration: 5000,
        onAnimationStopped: function() {
            setTimeout(doAjax,10000);
        }
    });
}
...