Question

我创建了一个UI，当服务返回true值时，我创建了一个加载栏，它将达到100％，达到100％后，用户应该重定向到另一个页面。

假设，如果服务返回false值，状态栏将保持10％加载。

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

一切都很好。但我希望进度条达到100％，之后只应重定向用户。下面是代码（以上是jsfiddle链接）：

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);
        return false;
    } else {
        width ++;
        elem.style.width = width + '%'; 
        perNum.innerHTML = width * 1  + '%';
        //return true;
    }
}

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

redirectUser(progressBar());

谢谢，有任何问题吗？请问。

Answer 1

检查宽度何时达到100％，然后仅重定向到其他页面。所以在progressBar function添加条件就像这样。添加超时只是为了显示宽度达到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)
  }

这可能不适用于小提琴或Stackoverflow片段，因为'X-Frame-Options'在用于显示结果的帧中设置为'SAMEORIGIN'。

Answer 2

在这里你https://jsfiddle.net/4t6bppjs/10/

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

我刚添加了setTimeout。

Answer 3

您的方法似乎正确，但您正在错误地调用它们。

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

Answer 4

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);
				return false;
			} else {
				width ++;
				elem.style.width = width + '%'; 
				perNum.innerHTML = width * 1  + '%';
				//return true;
			}
			if(width >= 100 && serviceStatus){
				window.location = "redirect url";
			}
		}

		function redirectUser(progressBar) {
			console.log(progressBar);
			
		}

		redirectUser();
	}

}

$(function() {
	blueProgressBar.initialize();
});

.upgrade-service-level-bar {
    background-color: #f8f8f8;
    width: 80%;
    padding: 20px 40px 20px 20px;
    border-bottom: 1px solid #ebebeb;
}

.bar-full-witdh {
    width: 100%;
    background-color: #ffffff;
    position: relative;
}

#blueBar {
    width: 10%;
    height: 6px;
    background-color: #007cba;
    display: block;
}

.bar-full-witdh span:last-child {
    font-size: 12px;
    position: absolute;
    top: -3px;
    right: -30px;
}

<html>
<head>
	<title></title>

</head>
<body>
<div class="upgrade-service-level-bar">
	<div class="bar-full-witdh">
		<span id="blueBar"></span>
		<span id="progressPercentage">10%</span>
	</div>
</div>
<br>
<p>
Once progress bar reaches 100% the redirect should happen.
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>

一旦增量值达到100

4 个答案: