如何触发任何箭头键

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.

Answer 2

Thanks so much, I edited it a little bit and now it works!

   var animation_timer;
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',slider1);
             slider1++;
            var wert1 = slider1;
            $slider.val(slider1).slider("refresh");
            var start = new Date().getTime(); //start = aktuelles Datum
            hideLayer2(wert1, start); 
            $('#jahr').text(wert1); 
            var $ausgabe = $("#ausgabe");
            $ausgabe.text(wert1); 
            gewaehltesJahr = wert1;
            if(slider1 == 2000){
                clearInterval(animation_timer);
            }
        }
    },1000);
}