Fonction de chargement de chargement onload en Javascript

Question

Je crée un script qui actualisera le nombre de "viewers" affiché en haut de mon site.

Javascript:

<script type="text/javascript"> 
window.onload = function(){ 
var auto_refresh = setInterval(
function() 
{ 
$('#viewers').load('viewers.php'); 
}, 5000); 
} 
</script> 

HTML:

<span id="viewers">0</span> 

sortie viewers.php:

100 

Je voudrais ajouter un effet "count up/down", donc par exemple si le viewers.php sort 200, il comptera alors après les 5000 millisecondes, et si ce compte tombe à 50, le 100 comptera jusqu'à 50.

Merci pour l'aide!

Answer 1

Voici une solution qui incrémente ou descend jusqu'au nouveau nombre de visionneuses sur une période donnée. Il semble courir un peu lentement, probablement en raison du retard de mon code dans le setInterval.

Appelez simplement le setViewers lorsque vous souhaitez mettre à jour le nombre.

<script type="text/javascript"> 
window.onload = function(){ 


var delay = 4000; 
var viewers = $("#viewers"); 
var auto_refresh = setInterval(
function() 
{ 
    var curViewers = Number(viewers.html()) 
    $('#viewers').load('viewers.php', function(){ 
    var newViewers = Number(viewers.html()); 
    setViewers(curViewers, newViewers); 
    }); 

}, 5000); 



function setViewers(currentNum, newNum){ 
    if(currentNum == newNum) return; 
    var updateSpeed = delay/Math.abs(currentNum - newNum); 
    var countDir = currentNum > newNum ? -1 : 1; 
    var timer = setInterval(function(){  
    currentNum += countDir; 
    viewers.text(currentNum); 
    if(currentNum == newNum) clearInterval(timer); 
    }, updateSpeed); 
} 
} 
</script>