jquery - Ajax Call Delayed by SetInterval

Question

I have this ajax call which is a recurring call every 10 seconds. This works perfectly However, the Visits counter only updates 10 seconds after page load. Until then, it is empty. If I set it to 60 seconds, which is more practical I think, then the area is BLANK for 60 seconds and only then the data appears.

How can I modify this to get the value of Visits immediately on page load and then continuously refresh it every 10 seconds?

<script type="text/javascript">
var Visits = 0; 

$(document).ready(function() {
  $("#counter").flipCounter(); 
  setInterval("ajaxd()",10000);
});

function ajaxd(){   // this function is called only after 10 seconds after page load
  $.ajax({
  type: "POST",
  cache:false,
  url: "getVisits.asp?dx=1,   // returns a number
  dataType: "text",
  data: "",
  success: function(data){
       Visits= parseFloat(data).toFixed(2);
  }
});
/// update value in <div>

$("#counter").flipCounter(
"startAnimation", // scroll counter from the current number to the specified number
{
start_number: 0, // the number we want to scroll from
end_number: Visits, // the number we want the counter to scroll to
numIntegralDigits: Visits.length-3, // number of places left of the decimal point to maintain
numFractionalDigits:2, // number of places right of the decimal point to maintain
easing: jQuery.easing.easeOutCubic, // this easing function to apply to the scroll.
duration: 3000 // number of ms animation should take to complete
});   
}

FINALLY, this part where the counter is to appear:

<div id="counter" class="bb_box">
<input type="hidden" name="counter-value" value="00.00"/>
</div>

Answer 1

试试这个（见 ajaxd() 在函数之后）

setInterval(function() {
ajaxd();

}, 10000);

function ajaxd(){   // this function is called only after 10 seconds after page load
  $.ajax({
  type: "POST",
  cache:false,
  url: "getVisits.asp?dx=1,   // returns a number
  dataType: "text",
  data: "",
  success: function(data){
       Visits= parseFloat(data).toFixed(2);
  }

 ajaxd();

Answer 2

改变

$(document).ready(function() {
  $("#counter").flipCounter(); 
  setInterval("ajaxd()",10000);
});

至

$(document).ready(function() {
  $("#counter").flipCounter(); 
  setInterval(ajaxd,10000);
  ajaxd();  // add this to call ajax once immediately
});

并将此代码块移动到脚本块的末尾，以避免调用未定义的函数。

更新 你可能会这样尝试：

var Visits = 0; 

function ajaxd(){   
  $.ajax({
  type: "POST",
  cache:false,
  url: "getVisits.asp?dx=1,   // returns a number
  dataType: "text",
  data: "",
  success: function(data){
       Visits= parseFloat(data).toFixed(2);
       $("#counter").flipCounter("setNumber", Visits);
  }
});

$(document).ready(function() {
  $("#counter").flipCounter(); 
  setInterval(ajaxd, 10000);
  ajaxd();
});