Таймер для слайд-шоу ничего не делает

Question

Извините за этот короткий и бессмысленный заголовок, но это действительно единственный, который действительно описывает мою проблему.

Я хочу (или должен) создать сценарий слайд-шоу, который (если флажок установлен и дается время) автоматически переключает фокус на другое изображение. У меня уже есть все, кроме автоматизации, и в настоящее время я работаю над этим.

Я думал, что для сравнения текущего времени с целевым временем (currentTime + user-input seconds (в ​​Integer)) каждый 1000 миллисекунд будет лучшим способом сделать это. Однако я не понимаю почему, но он не работает. Расчетное целевое время кажется правильным, так как я получаю правильную разницу в заранее рассчитанной date.getTime() и рассчитанной.

Я был бы очень благодарен, если бы вы могли мне помочь.

Вот JS:

var checkbox_checked; 

function timerfn() { 
    if (checkbox_checked === null || checkbox_checked === false) { 
     checkbox_checked = true; 
     var targetTime = new Date(); 
     alert(targetTime.getTime()); 
     var target_sec = targetTime.getSeconds() + dauerSwitch; 
     targetTime.setSeconds(target_sec); 
     alert(targetTime.getTime()); 

     // update currentTime every 1 Seconds (1000 Milliseconds) 
     setInterval(function() { 
      var current_time = Date.now(); 

      if (targetTime.getTime() == current_time) { 
       gallery("zur"); 
      } 
     }, 1000); 
    } else { 
     checkbox_checked = false; 
    } 
} 

А вот HTML:

<form> 
    <input type="checkbox" id="timer" name="timer" onClick="timerfn()"> 
    <input type="text" id="textbox" name="timerParam" 
     placeholder="Seconds between slides" value="" 
     onBlur="boxConv()"> //boxConv just converts the String to an Integer. It also checks if it's only numbers 
</form> 

Answer 1

То, как я хотел бы сделать это с небольшой помощью JQuery ($). Я переместил встроенный код в прослушиватель событий JS и использовал вход пользователя как параметр для интервала, чтобы заставить его работать.

$(function() { 
    var intervalTime = 1000, 
     counter = 1, 
     interval; 

    $("#textbox").on("blur", function() { 
     var inputValue = $(this).val(); 

     try { 
      //parses the user input into a integer 
      intervalTime = parseInt(inputValue, 10) * 1000; 
     } catch (e) { 
      //could not parse input 
     } 
    }); 

    $("#timer").on("click", function() { 
     if ($(this).is(":checked")) { 
      interval = setInterval(function() { 
       //gallery("zur"); 

       //fills the test output 
       $("#testOutput").val(counter); 
       counter++; 

      }, intervalTime); //intervall time is given in milliseconds 
     } else { 
      clearInterval(interval); 
     } 
    });  
}); 

А вот ссылка на рабочий пример: http://jsfiddle.net/9Yeuh/2/