Инкрементное уменьшение интервала

Question

Попытка создать загрузочную панель, которая становится медленнее и медленнее. Я сделал это так, чтобы каждый бит добавленной ширины постепенно увеличивался, но теперь я хочу сделать то же самое с значением интервала. На данный момент моя переменная «itime» установлена ​​на уровне 1000 и не замедляется с каждым шагом. Что я делаю не так?

var itime = 1000; 

var progress = setInterval(function(){ 

    var insidewidth = $('#inside').width(); 

    if (insidewidth > 388) { 
     $("body").css("background","blue"); 
     clearInterval(progress); 
    } 
    else { 
     $("#inside").width($("#inside").width() + (175/insidewidth)); 
     itime += 1000; 
    }; 


}, itime); 

Answer 1

Как только интервал установлен, вы не можете просто изменить его. Используйте тайм-аут и рекурсию вместо:

var itime = 1000; 

function progress(){ 
    setTimeout(function() { 
     var insidewidth = $('#inside').width(); 

     if (insidewidth > 388) { 
      $("body").css("background","blue"); 
     } else { 
      $("#inside").width(insidewidth + (175/insidewidth)); 
      itime += 1000; 
      progress(); 
     } 

    }, itime); 
} 

Answer 2

Как вы используете JQuery вы можете использовать easing functions, в частности easeOutExpo может соответствовать вашему потребительной случай, например,

$("#inside").animate({ width: bar_width }, duration:5000, easing: 'easeOutExpo'}); 

в случае необходимости вы можете предоставить custom easing function

Answer 3

Вот еще один способ сделать это, что не включает в себя несколько раз настройки таймеров:

$(function() { 
    var nMax = 99; 
    var nWidth = 0; 
    var nSpeed = 100; 

    var $progressBar = $('.progress-bar div'); 

    var oInterval = window.setInterval(function() { 
     nWidth += (nMax - nWidth)/100; 

     $progressBar.stop().animate({ 
      width: nWidth + '%' 
     }, nSpeed); 

     if(Math.round(nWidth) === nMax) window.clearInterval(oInterval); 
    }, nSpeed); 
}); 

Fiddle example