Javascript 如何在不设置setInterval的情况下激活我的进度条

我想做的是让porgressbar运行，如果我点击到进度条的链接，然后在进度条达到100%后重定向到profileform。我正在使用javascript显示和隐藏表单创建一个单页网站

我的问题是，当程序启动时，progressbar也会启动，即使我在主窗体中，它也会自动重定向到配置文件窗体

电流输出：

---

这是因为您正在$document.ready回调上调用progressBar函数，即使起始页不是进度条页。因此，无论进度条是否实际显示，该函数都会执行应该执行的操作

删除该选项将使代码按预期工作

---

你有没有想过使用AngularJs作为单页网站的框架？我无法复制这个问题。这对我来说很好。

var value = 0, progress;

//progress bar script
function progressBar() {
    progress = setInterval(function () {
        var $bar = $('.bar');
        if (value >= 100) {
            clearInterval(progress);
            $('.progress').removeClass('active');
            // go to profile after progress bar reaches 100%
            $(".show-page[data-page=Profile]").trigger("click");
        } else {
            value += 10;
            $bar.width(value * 4);
        }
        $bar.text(value + "%");
    }, 800);
};

// vars 
var value = 0, progress;

//progress bar script
function progressBar() {
    progress = setInterval(function () {
        var $bar = $('.bar');
        if (value >= 100) {
            clearInterval(progress);
            $('.progress').removeClass('active');
            // go to profile after progress bar reaches 100%
            $(".show-page[data-page=Profile]").trigger("click");
        } else {
            value += 10;
            $bar.width(value * 4);
        }
        $bar.text(value + "%");
    }, 800);
};
//for my show and hide form script
$(document).ready(function () {
    //progressBar();
    if (typeof (Storage) !== "undefined" && sessionStorage.getItem('pageToShow')) {
        var pageToShow = sessionStorage.getItem('pageToShow');
        $('.page').addClass('hide');
        $('.' + pageToShow).removeClass('hide');
    };
    $('.show-page').click(function () {
        var pageToShow = $(this).data('page');
        if (pageToShow == "progBar") {
            // reset progress var
            value = 0;
            $('.bar').width(0);
            $('.progress').addClass('active');
            progressBar();
        } else {
            clearInterval(progress);
        };
        $('.page').addClass('hide');
        $('.' + pageToShow).removeClass('hide');
        if (typeof (Storage) !== "undefined") {
            sessionStorage.setItem('pageToShow', pageToShow);
        };
    });
    $('.modal-btn').click(function () {
        $('.modal').modal('hide');
    });
});