Javascript 一旦增量值达到100，将用户重定向到另一页

我已经创建了一个UI，当服务返回真值时，我已经创建了一个加载条，它将达到100%，在达到100%后，用户应该重定向到另一个页面

让我们假设，如果服务返回false值，状态栏将保持10%的加载

我已经创建了函数，我已经编写了进度条逻辑，当服务返回true并重定向到其他URL时，我正在返回true值

一切都很顺利。但我希望进度条达到100%，之后只有用户应该重定向。下面是代码（上面是JSFIDLE链接）：

---

谢谢，有问题吗？请询问。

检查宽度达到100%时是否只重定向到其他页面。因此，在

progressBar函数中添加如下条件。添加超时只是为了显示宽度达到100%，然后它被重定向。即使不使用超时，也会重定向

function progressBar() {
        if (width >= 100 || serviceStatus === false) {
            clearInterval(id);
            return false;
        } else {
            width ++;
            elem.style.width = width + '%'; 
            perNum.innerHTML = width * 1  + '%';
            return true;
        }
    }

function redirectUser(progressBar) {
    if(progressBar){
      setTimeout(function(){
         window.location.href = "https://www.google.com";
      },1000)
  }

这可能不适用于fiddle或Stackoverflow代码段，因为在用于显示结果的帧中，
'X-Frame-Options'
被设置为
'SAMEORIGIN'
。
您的方法似乎正确，但您调用它们的方式不正确

redirectUser(progressBar());

这将首先调用
redirectUser
，然后调用
progressBar（）
，这就是您看到未定义的原因。如果必须将函数或回调传递给另一个函数，则不应调用它

您可以像传递其他变量一样传递它

redirectUser(progressBar);

希望这对你有帮助

var blueProgressBar = {
    initialize: function() {
        var serviceStatus = true; // Suppose value from service
        var elem = document.getElementById("blueBar"); 
        var perNum = document.getElementById("progressPercentage");

        var width = 10; // intial progress bar width
        var id = setInterval(progressBar, 10);

        function progressBar() {
            if (width >= 100 || serviceStatus === false) {
                clearInterval(id);
                redirectUser()
            } else {
                width ++;
                elem.style.width = width + '%'; 
                perNum.innerHTML = width * 1  + '%';
            }
        }

        function redirectUser() {
          console.log("redirect");
          window.location = "http://www.google.com";
        }

        progressBar();
    }

}

$(function() {
    blueProgressBar.initialize();
});


var blueProgressBar={
初始化：函数（）{
var serviceStatus=true；//假设来自服务的值
var elem=document.getElementById（“蓝巴”）；
var perNum=document.getElementById（“progressPercentage”）；
var width=10；//初始进度条宽度
变量id=设置间隔（进度条，10）；
函数progressBar（）{
如果（宽度>=100 | |服务状态===false）{
清除间隔（id）；
返回false；
}否则{
宽度++；
elem.style.width=宽度+'%'；
perNum.innerHTML=宽度*1+'%'；
//返回true；
}
如果（宽度>=100&&serviceStatus）{
window.location=“重定向url”；
}
}
函数重定向用户（progressBar）{
console.log（progressBar）；
}
重定向用户（）；
}
}
$（函数（）{
blueProgressBar.initialize（）；
});
。升级服务级别栏{
背景色：#F8；
宽度：80%；
填充：20px40px20px20px；
边框底部：1px实心#ebebebeb；
}
.酒吧满座{
宽度：100%；
背景色：#ffffff；
位置：相对位置；
}
#蓝巴{
宽度：10%；
高度：6px；
背景色：#007cba；
显示：块；
}
.bar满量程：最后一个孩子{
字体大小：12px；
位置：绝对位置；
顶部：-3px；
右：-30px；
}

10%



一旦进度条达到100%，就应该进行重定向。

给你

我刚刚添加了setTimeout。
是的，如果（宽度=100），我们可以添加该条件，然后重定向用户，如果我想使用return true和false并将其作为参数传递到另一个函数中，该怎么办？这很好，但必须使用setTimeout函数？稍等一下，还有其他方法吗？@Veer给点时间考虑，一定会给你提供其他解决方案。我已经更新了小提琴。我已经评论了window.location。尝试使用它并让我知道。var serviceStatus=true；将此值更改为false，然后查看代码是否有效。我创建该变量只是为了表明服务可以返回true或false值。我们想在上面显示是否必须重定向用户。当进度条为100%时，只有用户应该重定向到其他页面。进度条何时为100%？当服务返回true value时。如果serviceStatus为False，则无需将用户重定向到另一个页面。我正在将函数作为参数传递给另一个函数。progressBar（）返回的值为false或true。false当我们从服务url得到错误的输出时，反之亦然。
var blueProgressBar = {
    initialize: function() {
        var serviceStatus = true; // Suppose value from service
        var elem = document.getElementById("blueBar"); 
        var perNum = document.getElementById("progressPercentage");

        var width = 10; // intial progress bar width
        var id = setInterval(progressBar, 10);

        function progressBar() {
            if (width >= 100 || serviceStatus === false) {
                clearInterval(id);
                redirectUser()
            } else {
                width ++;
                elem.style.width = width + '%'; 
                perNum.innerHTML = width * 1  + '%';
            }
        }

        function redirectUser() {
          console.log("redirect");
          window.location = "http://www.google.com";
        }

        progressBar();
    }

}

$(function() {
    blueProgressBar.initialize();
});

function redirectUser(progressBar) {
    if(progressBar) {
        setTimeout( function() {
            //---- window.location
        }, 1000);
    }
}