更新在线计数器而不重新加载页面

Question

请帮帮我。我的网站上有一个脚本显示（GTA 中服务器上的在线玩家计数器），当页面加载时，它从零开始到网站上的玩家数量。 [柜台代码][1] [1]：https://i.stack.imgur.com/5gkkX.jpg

var updateInterval = 700;
_timer = setInterval(updatePlayerCount, updateInterval);

function ShowCounter() {
  clearInterval(_timer);
  $('#online').each(function() {
    $(this).prop('Counter', 0).animate({
      Counter: $(this).text()
    }, {
      duration: 4000,
      easing: 'swing',
      step: function(now) {
        $(this).text(Math.ceil(now));
      }
    });
  });
}

function updatePlayerCount() {
  var ip = "rage2.grand-rp.su:22005";
  $.getJSON('https://cdn.rage.mp/master', function(masterlist) {
    if(masterlist[ip] != undefined){
      document.getElementById('online').innerHTML = masterlist[ip].players;
      ShowCounter();
    }
  });
}

我有一个_timer，它应该在不重新加载页面的情况下更新数字，但不知何故它不起作用。如何解决？我把这个贴在 jsfiddle https://jsfiddle.net/kg8uap9d/8/

Answer 1

使用 setTimeout 代替 setInteval

var updateInterval = 5000;
_timer = setTimeout(updatePlayerCount, updateInterval);


function updatePlayerCount() {
  var ip = "rage2.grand-rp.su:22005";
  $.getJSON('https://cdn.rage.mp/master', function(masterlist) {
    if(masterlist[ip] != undefined){
      document.getElementById('online').innerHTML = masterlist[ip].players;
      ShowCounter();
      _timer = setTimeout(updatePlayerCount, updateInterval);
    }
  });
}