So I have a function that I want to run over and over again, but the problem is that I only want to do so once all ajax calls are done, and so far it doesn't do that. I know that I can run the ajax call in synchronous, but the problem with that is that it freezes the whole page, which is something I don't want.

My code so far is.
Code:
function loadPage(url,id){
    var time = Date.now();
    var xml = new XMLHttpRequest();
    
    xml.open("GET",url,true);
    xml.onreadystatechange = function(){        
        if(xml.readyState == 4){
            document.getElementById(id).innerHTML = xml.responseText+"<small>("+(Date.now()-time)+")</small>";
        }
    }
    
    xml.send(null);
}

//Refresh ajax data
function refresh(){
    loadPage('../modules/userInfo.php','StatusInfo');
    loadPage('../modules/userMessage.php','UserMessage');
    loadPage('../modules/userBattle.php','UserBattleStatus');
    setTimeout(refresh,1); //Set to 1 for testing purposes.
}

//Load everything automaticly
window.onload = function(){
    refresh();
}