Do something after function is complete

Ik heb een pagina gemaakt met 10 items uit mijn database en wanneer de pagina helemaal beneden aan het document is dan worden er 10 nieuwe items geladen en onderaan de pagina bijgevoegd. Dit blijft zich net zo vaak herhalen tot er geen items meer zijn.

Dit werkt prima tenzij het een keer even duurt voordat de items uit de database zijn geladen. Het scrollpunt blijft dan onderaan de pagina staan en blijft iedere keer 10 items onderaan bijvoegen en dit zijn soms heel veel items in een keer.

Ik wil dus dat de tweede Ajax post pas gebeurd wanneer LoadNewsPage(); echt items heeft geladen en weergeven want dan is de bodem van mijn pagina veranderd.
Iemand een idee?

function LoadNewsPage() {
	// Load Newspage
	var sessionlang			=	localStorage.getItem('Lang');
	var sessionmeasure		=	localStorage.getItem('Measurement');
	var sessionid			=	localStorage.getItem('Session');
	$.ajax({
		type: "POST",
		url: url + "/includes/page-news.php",
		data: {lang: sessionlang, measure: sessionmeasure, sessionid: sessionid},
		success: function(response){                    
			$("#page-news").html(response); 
		}
	});
}

$(".footer-menu-news").click(function() {
	LoadNewsPage();
	if ($("#page-news").is(":visible")) {
		start	=	0;
		$(window).scroll(function() {
			if($(window).scrollTop() + $(window).height() == $(document).height()) {
				var sessionlang		=	localStorage.getItem('Lang');
				var sessionmeasure	=	localStorage.getItem('Measurement');
				var sessionid		=	localStorage.getItem('Session');
				start 				= 	start + 10;
				var limit			=	10;
				$.ajax({
					type: "POST",
					url: url + "/formhandling/show_news.php",
					data: {lang: sessionlang, measure: sessionmeasure, sessionid: sessionid, start: start, limit: limit},
					success: function(response){        
						$("#page-news .subbody").append(response);
					}
				});
			}
		});
	}
});