javascript - 增量减少间隔

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 时，您可能想要使用缓动函数，特别是easeOutExpo可能适合您的用例，例如

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

如果需要，您可以提供自定义缓动功能

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

小提琴示例