How to trigger any of the arrow keys

Question

I have an application (HTML5, JavaScript, Jquery, jquery Mobile) with a slider. The handle can be moved via touch and you can navigate through the years 1861 to 2000. There are symbols on my map which are visible/non visible depending on the year. See my example image.

I also want the handle to move, when the user clicks a specific button ("forward"). the handle should go through each year until the user clicks a different button. I managed that with one click the handle goes + 1 year, and the handle, the year and the map update the changed year.

	function moveLeft(){
	var slider1 = $("#slider").val();
	var $slider = $("#slider");
	slider1++;
	$slider.val(slider1).slider("refresh");
	var wert1 = slider1;
		var start = new Date().getTime(); //start = 
		hideLayer2(wert1, start); 
		$('#jahr').text(wert1); 
		var $ausgabe = $("#ausgabe");
		$ausgabe.text(wert1); 
		gewaehltesJahr = wert1;

I built a for loop (for (i =slider1; i< 2000; i++)) for this function but the handle and everything will only update, if the function reached the year 2000. I want to see the update of every single year. Even if I go through the code with a debugger, it will only update year, handle and map when it finished the loop und exited the function.

Following code for example: If i start in 1861 und initialise the function the handle and map will jump directly into 1870 after the alert "alert("vor") in the last line.

function vor(){ 
	var slider1 = $("#slider").val();
	var $slider = $("#slider");
	for( var s = slider1; s < 1870; s++){	
		//$slider.val(s).slider("refresh");
		$("#slider").slider('value',s);
		alert(s);
		var wert1 = s;
		var start = new Date().getTime(); //start = aktuelles Datum
		hideLayer2(wert1, start); 
		$('#jahr').text(wert1); 
		var $ausgabe = $("#ausgabe");
		$ausgabe.text(wert1); 
		gewaehltesJahr = wert1;
	}
	alert("vor");
}

The handle, when in focus can also be moved by pressing the arrowkeys.

$('.ui-slider-track .ui-btn.ui-slider-handle').focus();

I tried du imitate the pressing of one key to go a year forward but it isn't working either.I tried to set a trigger but it didn't work. Can anybody help?

var kEvent = document.createEvent('Event');
	kEvent.initKeyEvent("keypress", true, true, null, false, false, false, false, 38, 0);
	document.activeElement.dispatchEvent(kEvent);

Answer 1

For loop gets executed instantly, so you have to use javascript timers!

//Global flag to decide animation
//Make this false to clear the animation loop from anywhere
var animate_slider = false;

//Global timer for animation
var animation_timer;

//Call animation function
function vor(){ 
    animate_slider = true;
    animation_timer = setInterval(function(){
        if(!animate_slider){
            clearInterval(animation_timer);
        }
        else{
            var slider1 = $("#slider").val();
            var $slider = $("#slider");
            $("#slider").slider('value',s);
            var wert1 = s;
            var start = new Date().getTime(); //start = aktuelles Datum
            hideLayer2(wert1, start); 
            $('#jahr').text(wert1); 
            var $ausgabe = $("#ausgabe");
            $ausgabe.text(wert1); 
            gewaehltesJahr = wert1;
            if(slider1 == maxValue){
                clearInterval(animation_timer);
            }
        }
    },1000);
}

Note:

Triggering arrow keys is not necessary & pointless, cause it'll also result in instance execution of all clicks. So even there you have to use timers, thus you can bypass that & change you main method with timers.