javascript - jquery setInterval 函数中的 SetValue 和 bootstrap 进度条宽度不匹配

Question

用于设置进度条宽度的值很好，但是当我在控制台中检查它们或查看页面上的结果时，它们显然是不正确的。由于某种原因，只有当复选框选项为 1 而不是 2 时才会发生这种情况。

var timeInterval;
// For procedure parameter
var choice;
if (document.getElementById('myonoffswitch').checked == false) {
    choice = 1;
    timeInterval = 300;
} else {
    choice = 2;
    timeInterval = 13400;
};

var $bar = $('.progress-bar');
var $barWidth = $('#pBar');
var barIntervalLength = 0;
var curBarWidth = 0;
var setWidth = 0;

var percentDisplay = 0;

$bar.width(0);

var progress = setInterval(function () {
barIntervalLength = $barWidth.width() / 20;
curBarWidth = $bar.width();
setWidth = barIntervalLength + curBarWidth;

    percentDisplay = percentDisplay + 5;
if (percentDisplay > 100) {
    clearInterval(progress);
    $('.progress').removeClass('active');
} else {
    $bar.width(setWidth);
    $bar.text(percentDisplay + "%");

    console.log("set: " + setWidth);
    console.log("barWidth: " + $barWidth.width());
    console.log("barIntervalLength: " + barIntervalLength);
    console.log("bar.width: " + $bar.width());
    };

}, timeInterval);

下面是控制台的结果:

set: 27.9
barWidth: 558
barIntervalLength: 27.9
bar.width: 0
set: 46.9
barWidth: 558
barIntervalLength: 27.9
bar.width: 19
set: 67.9
barWidth: 558
barIntervalLength: 27.9
bar.width: 40

第二个 bar.width:应为 27.9，第三个应为 55.8(或非常接近这些数字)。

这些是选中该框(选项 2)时的结果，这些是正确的:

set: 27.9
barWidth: 558
barIntervalLength: 27.9
bar.width: 0
set: 55.9
barWidth: 558
barIntervalLength: 27.9
bar.width: 28
set: 83.9
barWidth: 558
barIntervalLength: 27.9
bar.width: 56
set: 111.9

我只是把头撞在 table 上试图解决这个问题。

希望有人能告诉我发生了什么事。

Answer 1

Bootstrap 进度条使用 css 过渡加宽/缩短。 jquery width() 函数返回元素的实际宽度。当 choice=1 时，您的间隔为 300 毫秒，这远低于转换时间。因此，您检索的宽度介于初始宽度和您设置的宽度之间。

这是正在发生的事情的演示:

$(function() {
  setInterval(function() {
    $('.progress').width(1000);
  }, 1000);
  setInterval(function() {
    console.log($('.progress').width());
  }, 100);
});

.progress {
  width: 0;
  height: 40px;
  background: blue;
  transition: linear 10s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="progress"></div>

相反，将您希望元素的实际宽度保存在 js 中。像这样的东西:

var $bar = $('.progress-bar');
var $barWidth = $('#pBar');
var barIntervalLength = 0;
var curBarWidth = 0;

var percentDisplay = 0;

$bar.width(curBarWidth);

var progress = setInterval(function () {
barIntervalLength = $barWidth.width() / 20;
curBarWidth += barIntervalLength ;

    percentDisplay = percentDisplay + 5;
if (percentDisplay > 100) {
    clearInterval(progress);
    $('.progress').removeClass('active');
} else {
    $bar.width(curBarWidth);
    $bar.text(percentDisplay + "%");

    console.log("barWidth: " + $barWidth.width());
    console.log("barIntervalLength: " + barIntervalLength);
    console.log("bar.width: " + $bar.width());
    };

}, timeInterval);