使用setinterval時如何停止屬性的初始跳轉

Question

我正在使用設置的間隔來顯示正在進行的動態數據，但是在這里我的問題是在頁面的初始位置，它有點是在跳過元素然后顯示數據。我如何才能停止這種跳轉，在這里我的進度條也從中間開始顯示

 var timerId = 0; $(document).ready(function() { loadData(); }); function loadData() { var data = { information: { "num": 73.00, "value": 75 } } var i = 0; var maxValue = data["information"]["value"]; timerId = setInterval(function() { data.information.value += 1; data.information.num += 0.01; let tri = data.information.num.toFixed(2); $('.animation').text(tri); $('.process').text(data.information.value); $('#blips > .progress-bar').css("width", data.information.value + "%"); i++; if (data.information.value == 100) { clearInterval(timerId); } }, 1000) } $('#stop').click(function() { clearInterval(timerId); }); 

 .text { position: absolute; z-index: 999; margin: 0 auto; left: 0; right: 0; text-align: center; top: 19%; font-family: Arial, sans-serif; color: black; width: 62%; } .nimation {} .progress-bar { background-color: brown !important; width: 244px; height: 44px; } #stop { position: relative; margin-left: 112px; left: 0px; margin-top: 46px; width: 288px; height: 80px; border-radius: 5px; background: brown; color: white; } .process { font-size: 36px; margin-left: 26%; } .para { font-size: 36px; color: black; margin-top: -5rem; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div> <div class="text"> <p class="animation"> </p> <p class="para">Data</p> </div> <br> <br> <div class="progress" id="blips"> <div class="progress-bar" role="progressbar"> <span class="sr-only"></span> </div> </div> <p class="process"></p> <br> <button class="btn btn-primary" id="stop">Stop</button> </div> </div> 

Answer 1

在啟動間隔計時器之前，將用於更新data對象中DOM的代碼放在單獨的函數中，以便您首先顯示帶有初始值的數據。

 var timerId = 0; $(document).ready(function() { loadData(); }); function loadData() { var data = { information: { "num": 73.00, "value": 75 } } var i = 0; var maxValue = data["information"]["value"]; function displayProgress() { let tri = data.information.num.toFixed(2); $('.animation').text(tri); $('.process').text(data.information.value); $('#blips > .progress-bar').css("width", data.information.value + "%"); } displayProgress(); timerId = setInterval(function() { data.information.value += 1; data.information.num += 0.01; displayProgress(); i++; if (data.information.value == 100) { clearInterval(timerId); } }, 1000) } $('#stop').click(function() { clearInterval(timerId); }); 

 .text { position: absolute; z-index: 999; margin: 0 auto; left: 0; right: 0; text-align: center; top: 19%; font-family: Arial, sans-serif; color: black; width: 62%; } .nimation {} .progress-bar { background-color: brown !important; width: 244px; height: 44px; } #stop { position: relative; margin-left: 112px; left: 0px; margin-top: 46px; width: 288px; height: 80px; border-radius: 5px; background: brown; color: white; } .process { font-size: 36px; margin-left: 26%; } .para { font-size: 36px; color: black; margin-top: -5rem; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div> <div class="text"> <p class="animation"> </p> <p class="para">Data</p> </div> <br> <br> <div class="progress" id="blips"> <div class="progress-bar" role="progressbar"> <span class="sr-only"></span> </div> </div> <p class="process"></p> <br> <button class="btn btn-primary" id="stop">Stop</button> </div> </div>