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

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

我只是想把头撞在桌子上想办法解决这个问题。

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

Answer 1

使用css转换来扩展/缩短引导进度条。jquery width()函数返回元素的实际宽度。当choice=1时，间隔为300 is，这比过渡时间要低得多。因此，您正在检索在初始宽度和设置的宽度之间的宽度。

下面是正在发生的事情的演示：

​

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