I making my own real time youtube subscriber counter but refresh time is to high and when I change refresh time it not happening. Can someone tell me what I am doing wrong?
<html>
<head>
<link rel="stylesheet" href="odometer-theme-default.css"/>
<script src="odometer.js"></script>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
.odometer {
font-size:100px;
}
#ytName {
font-size: 52px;
font-family:Arial;
}
</style>
</head>
<script type="text/javascript">
$(document).ready( function() {
var chanName = "";
loadChannel("UCPKqr9qSEXi6r03B18wRj6g");
function loadChannel(name) {
chanName = name;
var url = 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id='+name+'&key=AIzaSyBPIHea9sWYMSxe8W-tIn7OUvIw-dagDDI';
$.getJSON(url, function(data) {
$("#odometer").html(data.items[0].statistics.subscriberCount);
});
var url1 = 'https://www.googleapis.com/youtube/v3/channels?part=snippet&id='+chanName+'&key=AIzaSyBPIHea9sWYMSxe8W-tIn7OUvIw-dagDDI';
$.getJSON(url1, function(data) {
$('#ytName').html(data.items[0].snippet.title);
$('#ytLink').html('<a href="http://youtube.com/' + data.items[0].snippet.customUrl + '\">Link</a>');
});
}
setInterval( function() {
var url = 'https://www.googleapis.com/youtube/v3/channels?part=statistics&id='+chanName+'&key=AIzaSyBPIHea9sWYMSxe8W-tIn7OUvIw-dagDDI';
$.getJSON(url, function(data) {
$("#odometer").html(data.items[0].statistics.subscriberCount);
}, 1000);
});
});
</script>
<body background = "bg.jpg">
<center>
<div id="ytName"></div>
<div id="ytLink"></div>
<div id="odometer" class="odometer"></div>
</center>
</body>
Maybe javascript should be written differently?
if you write the new time in milliseconds, the response is a bit
setInterval( function() {
// update code is here
}, 1000)