如何在文本不斷變化時避免在按鈕內移動文本？

Question

到目前爲止，我實現了一個按鈕，當用戶點擊它時，它會顯示一個加載文本，每500ms一些點出現/消失，指出正在發生的事情。

請參閱我的示例bootply。

問題是文本會在按鈕內移動。我的方法是在最後用空格填充buttontext，但這不起作用，因爲HTML解釋器會刪除所有多重空格。任何建議如何我可以實現按鈕的文本不在按鈕內移動？

HTML：

<button id="buttonTextShowPath">Click me</button> 

JS：

var refreshInterval; 
var loadingBalls; 
var whiteSpace; 
function startAnimation() { 
    $("#buttonTextShowPath").html("Loading"); 
    loadingBalls="."; 
    whiteSpace = " "; 
    refreshInterval = setInterval(function(){ 
     $("#buttonTextShowPath").html("Loading"+loadingBalls+whiteSpace); 
     loadingBalls+="."; 
     whiteSpace.slice(1); 
     if(loadingBalls.length === 5){ 
      loadingBalls="."; 
      whiteSpace=" "; 
     } 
     var j=loadingBalls.length+whiteSpace.length; 
    }, 500); 
} 

$("#buttonTextShowPath").click(function(){ 
    startAnimation(); 
}); 

Answer 1

您可以使用 而不是空格。它們會影響文本的寬度。

如果您不使用單色空間字體，則需要的 的數量可能與.的數量不同。

下面的代碼的版本，應該做你想要什麼它：

var $btn = $('#space_button'); 
 
var originalHTML = $btn.html(); 
 
var counter = 0; 
 

 
setInterval(function(){ 
 

 
    var newHTML = originalHTML; 
 
    
 
    for (var i=0; i < counter; i++) { 
 
    \t newHTML = newHTML.replace('&nbsp;', '.'); 
 
    } 
 
    
 
    $btn.html(newHTML); 
 
    
 
    counter++; 
 
    
 
    if (counter > 5) counter = 0; 
 

 
}, 200);

#space_button { 
 
    min-width: 180px; 
 
    text-align: center; 
 
    background-color: lightblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="space_button"> 
 
Hello World&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
</button>