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

Question

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

我的问题是当程序启动时，进度条也会启动，即使我在 Home form 中，它也会自动重定向到 Profile form。

当前输出:

http://jsfiddle.net/6VrXD/25/

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

Answer 1

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

删除它应该会使代码按预期工作。 http://jsfiddle.net/6VrXD/27/

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