我有如下代码。这会检索一些用于计数器的数据，包括重新加载间隔的变量 - 下面不使用它来排除数据检索的问题，我已经硬编码了 10 秒的间隔，但问题仍然存在。
对于初始页面加载以及一个时间间隔，一切都工作正常，然后一切都变得困惑，调用没有延迟，并且计数器在下一次调用之前无法使用react， 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>
最佳答案
不要使用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 计时循环问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9179500/