Блог

Значения, входящие в настройку ширины индикатора выполнения, в порядке, но когда я проверяю их в консоли или просматриваю результаты на странице, они явно неверны. По какой-то причине это происходит только тогда, когда флажок установлен равным 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
 

2-я полоса.ширина: должна быть 27,9, а 3-я должна быть 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
 

Я просто бьюсь головой о свой стол, пытаясь разобраться в этом.

Надеюсь, кто-нибудь сможет объяснить мне, что происходит.

Индикаторы выполнения начальной загрузки расширяются / укорачиваются с помощью 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);