Использование ползунка для автоматического обновления части страницы

Question

Итак, я пытаюсь использовать ползунок, чтобы контролировать, как скоро страница должна быть обновлена. После проверки флажка он должен начать автоматическое обновление после проверки, он должен прекратить автообновление.

это мой текущий jsfiddle: http://jsfiddle.net/z68mR/19/

Две проблемы: почему сдвинув панель не изменяет значение? Я установил его в 10 в начале, он отображает 10, но не меняет его, когда я его перетаскиваю.

Является ли способ, которым я устанавливаю setInterval правильно?

function refresh(time){ 
     refreshIntervalId = setInterval(
      function() 
        { 
        // things to do... 
        }, parseInt(time*1000));  
     } 

Answer 1

Я пошел вперед и обновляю fiddle

Первая проблема была ваша функция showValue не была определена на глобальном объекте окна.

window.showValue = showValue; 

Далее нам нужно определить свою refreshIntervalId переменную вне каких-либо функций, так что он всегда ссылается на тот же объект.

Наконец мы очищаем старый интервал каждый раз, когда мы входим в новый один

clearInterval(refreshIntervalId); 
refreshIntervalId = setInterval(
       function() 
       { 
       $("#area").text("Refreshed").fadeIn(300).fadeOut(300).fadeIn(300).fadeOut(300); 
       }, parseInt(time*1000));