Таймер таймера JQuery для запуска события

Question

Мне было интересно, есть ли способ настроить ползунок автоматически, например, когда я нажимаю кнопку воспроизведения, ползунок и значение будут увеличиваться автоматически. Вот мой ползунок: JSFiddle

В принципе, я хотел нажать кнопку воспроизведения, а ползунок и его значение будут увеличиваться автоматически и останавливаться в течение нескольких секунд при каждом значении до приращения.

Через мое исследование я знаю, что существует метод, называемый setInterval(), который автоматически повторит определенное событие, но я не уверен, как его реализовать.

И это мой Fiddle после того, как я добавил функцию автоматического воспроизведения, но моя ползунка не выходит.

Answer 1

[ОБНОВЛЕНО ОТВЕТ]

Здесь ваше окончательное решение (я надеюсь), Fiddle

В основном вы использовали step метод приращение времени, но step вызывается при перемещении ползунка с помощью мыши , Вы должны использовать метод change для обновления значения времени.

$("#slider-range").slider({  
    min: 0, 
    max: 1380, 
    step: stepOne, 
    animate: "slow", 
    change: function(e,ui) 
    { 
     var hours = Math.floor(ui.value/60); 
     var minutes = ui.value - (hours * 60); 

     if(hours.length == 1) hours = '0' + hours; 
     if(minutes.length == 1) minutes = '0' + minutes; 
     if(minutes==0)minutes = '00'; 

     // Convert 24 hours format into 12 
     if(hours == 0){ 
      hours = 12; 
      ext = "AM"; 
     } 
     if(hours == 12){ 
      ext = "PM"; 
     } 
     if(hours > 12){ 
      hours = hours - 12; 
      ext = 'PM'; 
     } 

     $('#sliderValue').html(hours+':'+minutes + ext); 
    } 
}); 

Answer 2

http://jsfiddle.net/0twk5L7y/10/

$('#btnPlay').on('click', function(){ 
    // call a recursive function here... 
}); 

Вы можете изменить логику внутри функции. Но обычно я использую интерфейсную структуру, такую ​​как Ember или Angular, которая помогает вам достичь того, что вы хотите сделать легко.