Question

我有以下代码。这将检索用于计数器的一些数据，包括重载间隔的变量 - 为了排除数据检索的问题，下面不使用这个数据，我已经硬编码了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>

Answer 1

请勿使用setInterval发送ajax请求或启动动画，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等，直到浏览器崩溃了。

<强>更新

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);
        }
    });
}

使用flipCounter的setInterval / onAnimationStopped的jQuery Ajax定时循环问题

1 个答案: