一旦增量值達到100，將用戶重定向到另一頁

Question

我創建了一個UI，當服務返回真值時，我創建了一個將達到100％的加載欄，達到100％後用戶應重定向到另一頁。

讓我們假設，如果服務返回false值，狀態欄停留在10％加載。

Link to jsfiddle

我已經創建了功能我已經寫了進度條的邏輯，我返回真值時的服務回報真實和重定向到其他網址。

一切都很好。但是我希望進度條達到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

在這裏你去https://jsfiddle.net/4t6bppjs/10/

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

我剛纔添加的setTimeout。

Answer 2

檢查當寬度達到100％時，只重定向到其他頁面。所以像這樣在你的progressBar function中添加條件。已經添加超時只是爲了顯示寬度達到100％，然後重定向。即使你不使用會重定向的超時。因爲'X-Frame-Options'在用於顯示結果的幀設置爲'SAMEORIGIN'

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

這可能不是在撥弄或片斷＃1的工作。

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 = { 
 

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

 
\t \t var width = 10; // intial progress bar width 
 
\t \t var id = setInterval(progressBar, 10); 
 
\t \t function progressBar() { 
 
\t \t \t if (width >= 100 || serviceStatus === false) { 
 
\t \t \t \t clearInterval(id); 
 
\t \t \t \t return false; 
 
\t \t \t } else { 
 
\t \t \t \t width ++; 
 
\t \t \t \t elem.style.width = width + '%'; 
 
\t \t \t \t perNum.innerHTML = width * 1 + '%'; 
 
\t \t \t \t //return true; 
 
\t \t \t } 
 
\t \t \t if(width >= 100 && serviceStatus){ 
 
\t \t \t \t window.location = "redirect url"; 
 
\t \t \t } 
 
\t \t } 
 

 
\t \t function redirectUser(progressBar) { 
 
\t \t \t console.log(progressBar); 
 
\t \t \t 
 
\t \t } 
 

 
\t \t redirectUser(); 
 
\t } 
 

 
} 
 

 
$(function() { 
 
\t 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> 
 
\t <title></title> 
 

 
</head> 
 
<body> 
 
<div class="upgrade-service-level-bar"> 
 
\t <div class="bar-full-witdh"> 
 
\t \t <span id="blueBar"></span> 
 
\t \t <span id="progressPercentage">10%</span> 
 
\t </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>

Answer 5

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); 
       location.href = "http://www.google.com"; 
       return false; 
      }else { 
       width ++; 
       elem.style.width = width + '%'; 
       perNum.innerHTML = width * 1 + '%'; 
       //return true; 
      } 
     }  
    } 

} 

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