Question

我有一个带滑块的应用程序（HTML5，JavaScript，Jquery，jquery Mobile）。手柄可以通过触摸移动，您可以浏览1861年到2000年。我的地图上有符号，根据年份可见/不可见。 See my example image.

当用户点击特定按钮（“前进”）时，我还希望手柄移动。句柄应该每年进行，直到用户点击不同的按钮。我只需点击一下即可处理该句柄+ 1年，并且句柄，年份和地图会更新已更改的年份。

	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;

我为这个函数构建了一个for循环（for（i = slider1; i＆lt; 2000; i ++））但是句柄和一切只会更新，如果函数到达2000年。我想看到每个的更新单年。即使我使用调试器查看代码，它只会在完成循环并退出函数时更新年份，处理和映射。

以下代码为例：如果我在1861年开始并初始化该函数，则句柄和地图将在最后一行的警报“alert（”vor“）之后直接跳转到1870。

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");
}

按下箭头键时，也可以移动手柄。

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

我试过模仿按下一把钥匙向前走一年，但它也没有用。我试图设置一个触发器，但它没有用。有人可以帮忙吗？

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

Answer 1

For循环立即执行，所以你必须使用javascript计时器！

//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);
}

注意：

不需要触发箭头键。没有意义，因为它还会导致所有点击的实例执行。所以即使在那里你也必须使用定时器，因此你可以绕过那个＆amp;用计时器改变你的主要方法。

Answer 2

非常感谢，我编辑了一下，现在它可以了！

   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);
}

如何触发任何箭头键

2 个答案: