javascript - 动态启动和停止多个间隔循环

Question

对于页面上尽可能多的进度圈，我需要等量的计时器来更新它们的进度百分比数字和颜色。它们都从 0 开始，并逐步达到它们的 data-current-progress 值。

选择颜色

我有一组特定的 100 种颜色，从红色到橙色，最后是绿色，在一个数组中；

var ProgressColourTween = [
    "#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00",
       ...        ...        ...        ...        ...
    "#8cc400", "#8ac500", "#87c600", "#85c700", "#82c800"
];

每种颜色都是百分比的实体表示，因此在 1% 时它看起来会很红，大约 50% 橙色和 100% 绿色。

更新进度数值

在循环中，从 0 到它们的 data-current-progress 值，例如 i++，我将更新该值。

  <div class="numbers">
      <span>0%</span>
  </div>

问题

如果这是我正在处理的单个进度循环，只需命名一个计时器然后稍后结束它，事情就会容易得多，但是与多个一起工作时，我发现启动几个并停止是相当困难的他们完成时他们，而不是其他人完成时。

我如何动态创建、启动和停止多个间隔循环以达到预期目的？

演示:http://jsfiddle.net/7urppm3s/

Answer 1

为每个 .circle 设置计时器并计算每个计时器执行的百分比。

var ProgressColourTween = [
  "#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00", "#ff4f00", "#ff5000", "#ff5100", "#ff5200", "#ff5400",
  "#ff5600", "#ff5700", "#ff5900", "#ff5a00", "#ff5c00", "#ff5c00", "#ff5e00", "#ff5f00", "#ff6100", "#ff6300",
  "#ff6400", "#ff6600", "#ff6700", "#ff6800", "#ff6900", "#ff6b00", "#ff6c00", "#ff6e00", "#ff6f00", "#ff7100",
  "#ff7200", "#ff7300", "#ff7500", "#ff7600", "#ff7800", "#ff7900", "#ff7a00", "#ff7c00", "#ff7d00", "#ff7f00",
  "#ff8700", "#ff8800", "#ff8a00", "#ff8b00", "#ff8c00", "#ff8e00", "#ff8f00", "#ff9100", "#ff9200", "#ff9400",
  "#ff9400", "#fc9500", "#fa9600", "#f79700", "#f59800", "#f29900", "#f09a00", "#ed9c00", "#eb9c00", "#e89e00",
  "#e69e00", "#e3a000", "#e0a100", "#dea200", "#dba300", "#d9a400", "#d6a500", "#d4a600", "#d1a700", "#cfa800",
  "#cca900", "#c9ab00", "#c7ab00", "#c4ad00", "#c2ae00", "#bfaf00", "#bdb000", "#bab100", "#b8b200", "#b5b300",
  "#b3b400", "#b0b500", "#adb600", "#abb700", "#a8b900", "#a6b900", "#a3bb00", "#a1bb00", "#9ebd00", "#9cbe00",
  "#99bf00", "#96c000", "#94c100", "#91c200", "#8fc300", "#8cc400", "#8ac500", "#87c600", "#85c700", "#82c800"
];

var transitionTime = 2; // second

!(function($) {

  "use strict";

  $(function() {
    $('.radial-progress').TCHQProgCirc();
  });

  $.fn.TCHQProgCirc = function() {

    return this.each(function() {
      var $this = $(this)
      $this.find(".circle .mask, .circle .fill").css({
        'transition': "transform " + transitionTime + "s"
      });

      var rotateTo = $this.data("current-progress");

      $this.css({
        '--pf': (rotateTo * 1.8) + "deg",
        '--pff': (rotateTo * 3.6) + "deg",
        '--pfwid': (rotateTo * 57) + "px"
      })

      colorTween($this);

    });
  };
})(jQuery);

function colorTween($this) {
  $this.timer = setInterval(function() {
    $this.step = $this.step || 1;
    var c = $this.step++;
    var totalPercentage = $this.data("current-progress");
    var colorIndex = Math.floor(c * totalPercentage/100)
    var color = ProgressColourTween[colorIndex];

    $this.find('.fill').css('background-color', color)

    var percentage = Math.floor(totalPercentage * c / 100); // current percentage

    $this.find('.numbers span').text(`${percentage}%`)

    c++;

    if (c > 100) {
      clearTimeout($this.timer)
    }
  }, transitionTime * 1000 / 100);
}

.clear {
  clear: both;
}

.radial-progress {
  float: left;
  margin: 50px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  --pf: 0deg;
  --pff: 0deg;
  --pfwid: 0;
}

.radial-progress .circle .mask,
.radial-progress .circle .fill,
.radial-progress .circle .shadow {
  width: 120px;
  height: 120px;
  position: absolute;
  border-radius: 50%;
}

.radial-progress .circle .shadow {
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2) inset;
}

.radial-progress .circle .mask,
.radial-progress .circle .fill {
  -webkit-backface-visibility: hidden;
  transition: transform 1s;
  border-radius: 50%;
}

.radial-progress .circle .mask {
  clip: rect(0px, 120px, 120px, 60px);
}

.radial-progress .circle .mask .fill {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: #97a71d;
}

@keyframes move-in-steps {
  0% {
    background: red;
  }
  50% {
    background: yellow;
  }
  100% {
    background: #97a71d;
  }
}

.radial-progress.coloring .circle .mask .fill {
  animation: move-in-steps 1s;
}

.radial-progress .inset {
  width: 90px;
  height: 90px;
  position: absolute;
  margin-left: 15px;
  margin-top: 15px;
  background-color: #fbfbfb;
  border-radius: 50%;
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
}

.radial-progress .inset .percentage {
  height: 22px;
  width: 57px;
  overflow: hidden;
  position: absolute;
  top: 34px;
  left: 16.5px;
  line-height: 1;
}

.radial-progress .inset .percentage .numbers span {
  width: 57px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  font-weight: 800;
  font-size: 22px;
  /*font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  color: #97a71d;
}

.radial-progress .circle .mask.full,
.radial-progress .circle .fill {
  transform: rotate( var(--pf));
}

.radial-progress .circle .fill.fix {
  transform: rotate( var(--pff));
}

.radial-progress .inset .percentage .numbers {
  width: var(--pfwid);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radial-progress" data-current-progress="25">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="inset">
    <div class="percentage">
      <div class="numbers">
        <span>0%</span>
      </div>
    </div>
  </div>
</div>

<div class="radial-progress" data-current-progress="50">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="inset">
    <div class="percentage">
      <div class="numbers">
        <span>0%</span>
      </div>
    </div>
  </div>
</div>

<div class="clear"></div>

<div class="radial-progress" data-current-progress="75">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="inset">
    <div class="percentage">
      <div class="numbers">
        <span>0%</span>
      </div>
    </div>
  </div>
</div>

<div class="radial-progress" data-current-progress="100">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="inset">
    <div class="percentage">
      <div class="numbers">
        <span>0%</span>
      </div>
    </div>
  </div>
</div>

编辑:根据评论，我添加了一个可以暂停和恢复的新版本。代码的详细解释在代码注释中。

var ProgressColourTween = [
  "#ff4400", "#ff4900", "#ff4a00", "#ff4c00", "#ff4d00", "#ff4f00", "#ff5000", "#ff5100", "#ff5200", "#ff5400",
  "#ff5600", "#ff5700", "#ff5900", "#ff5a00", "#ff5c00", "#ff5c00", "#ff5e00", "#ff5f00", "#ff6100", "#ff6300",
  "#ff6400", "#ff6600", "#ff6700", "#ff6800", "#ff6900", "#ff6b00", "#ff6c00", "#ff6e00", "#ff6f00", "#ff7100",
  "#ff7200", "#ff7300", "#ff7500", "#ff7600", "#ff7800", "#ff7900", "#ff7a00", "#ff7c00", "#ff7d00", "#ff7f00",
  "#ff8700", "#ff8800", "#ff8a00", "#ff8b00", "#ff8c00", "#ff8e00", "#ff8f00", "#ff9100", "#ff9200", "#ff9400",
  "#ff9400", "#fc9500", "#fa9600", "#f79700", "#f59800", "#f29900", "#f09a00", "#ed9c00", "#eb9c00", "#e89e00",
  "#e69e00", "#e3a000", "#e0a100", "#dea200", "#dba300", "#d9a400", "#d6a500", "#d4a600", "#d1a700", "#cfa800",
  "#cca900", "#c9ab00", "#c7ab00", "#c4ad00", "#c2ae00", "#bfaf00", "#bdb000", "#bab100", "#b8b200", "#b5b300",
  "#b3b400", "#b0b500", "#adb600", "#abb700", "#a8b900", "#a6b900", "#a3bb00", "#a1bb00", "#9ebd00", "#9cbe00",
  "#99bf00", "#96c000", "#94c100", "#91c200", "#8fc300", "#8cc400", "#8ac500", "#87c600", "#85c700", "#82c800"
];

var transitionTime = 2; // second

!(function($) {

  "use strict";

  $(function() {
    $('.radial-progress').TCHQProgCirc();
  });

  $.fn.TCHQProgCirc = function() {

    return this.each(function() {
      var $this = $(this)

      // set trasitionTime
      $this.find(".circle .mask, .circle .fill").css({
        'transition': "transform " + transitionTime / 20 + "s"
      });

      colorTween($this);

    });
  };
})(jQuery);

var timerFlag = true;

function colorTween($this) {
  $this.timer = setInterval(function() {
    if (!timerFlag) {
      // if click "Pause" button, stop the function
      return;
    }

    // set the number of this function execute times, if $this.step is undefined at first, set it to 1
    $this.step = $this.step || 1;

    // assing c equals to $this.step, and makes $this.step = $this.step + 1 after assignment
    var c = $this.step++;

    // get the total percentage of this circle would be
    var totalPercentage = $this.data("current-progress");

    // calculate the current percentage
    // e.g. if the totalPercentage is 25%, in the first loop of the setInterval, 
    // percentage would be (25 * 1 / 100) = 0.25
    // then get the largest integer less than or equal to 0.25 which is 0

    // if the totalPercentage is 25%, in the end of the setInterval loop, 
    // percentage would be (25 * 100 / 100) = 25
    // then get the largest integer less than or equal to 25 which is 25

    // This makes us to select the right color
    var percentage = Math.floor(totalPercentage * c / 100);
    var color = ProgressColourTween[percentage];

    // calculate the variables to right values, you should know these better than I do since this is from your code ;)
    var pf = (1.8 * percentage)
    var pff = (3.6 * percentage)

    $this.css({
      '--pf': pf + "deg",
      '--pff': pff + "deg",
    })

    // change the color of fill bar
    $this.find('.fill').css('background-color', color)

    // change the percentage
    $this.find('.numbers span').text(`${percentage}%`)

    if (c >= 100) {
      // if current step is 100, clear timers
      clearTimeout($this.timer)
    }
  }, transitionTime * 1000 / 100); // convert transitionTime to milisecond and divide it into 100
}

$('button').on('click', function() {
  var paused = $(this).text() == "Pause"
  if (paused) {
    // if click "Pause" button, set flag to false, makes the timer stop from increasing the percentage
    timerFlag = false
  } else {
    // if click "Continue" button, set flag to true
    timerFlag = true
  }
  $(this).text(paused ? "Continue" : "Pause")
})

.clear {
  clear: both;
}

.radial-progress {
  float: left;
  margin: 50px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  --pf: 0deg;
  --pff: 0deg;
  --pfwid: 0;
}

.radial-progress .circle .mask,
.radial-progress .circle .fill,
.radial-progress .circle .shadow {
  width: 120px;
  height: 120px;
  position: absolute;
  border-radius: 50%;
}

.radial-progress .circle .shadow {
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2) inset;
}

.radial-progress .circle .mask,
.radial-progress .circle .fill {
  -webkit-backface-visibility: hidden;
  transition: transform 1s;
  border-radius: 50%;
}

.radial-progress .circle .mask {
  clip: rect(0px, 120px, 120px, 60px);
}

.radial-progress .circle .mask .fill {
  clip: rect(0px, 60px, 120px, 0px);
  background-color: #97a71d;
}

@keyframes move-in-steps {
  0% {
    background: red;
  }
  50% {
    background: yellow;
  }
  100% {
    background: #97a71d;
  }
}

.radial-progress.coloring .circle .mask .fill {
  animation: move-in-steps 1s;
}

.radial-progress .inset {
  width: 90px;
  height: 90px;
  position: absolute;
  margin-left: 15px;
  margin-top: 15px;
  background-color: #fbfbfb;
  border-radius: 50%;
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
}

.radial-progress .inset .percentage {
  height: 22px;
  width: 57px;
  overflow: hidden;
  position: absolute;
  top: 34px;
  left: 16.5px;
  line-height: 1;
}

.radial-progress .inset .percentage .numbers span {
  width: 57px;
  display: inline-block;
  vertical-align: top;
  text-align: center;
  font-weight: 800;
  font-size: 22px;
  /*font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
  color: #97a71d;
}

.radial-progress .circle .mask.full,
.radial-progress .circle .fill {
  transform: rotate( var(--pf));
}

.radial-progress .circle .fill.fix {
  transform: rotate( var(--pff));
}

.radial-progress .inset .percentage .numbers {
  width: var(--pfwid);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Pause</button>
<div class="radial-progress" data-current-progress="25">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="inset">
    <div class="percentage">
      <div class="numbers">
        <span>0%</span>
      </div>
    </div>
  </div>
</div>

<div class="radial-progress" data-current-progress="50">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="inset">
    <div class="percentage">
      <div class="numbers">
        <span>0%</span>
      </div>
    </div>
  </div>
</div>

<div class="clear"></div>

<div class="radial-progress" data-current-progress="75">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="inset">
    <div class="percentage">
      <div class="numbers">
        <span>0%</span>
      </div>
    </div>
  </div>
</div>

<div class="radial-progress" data-current-progress="100">
  <div class="circle">
    <div class="mask full">
      <div class="fill"></div>
    </div>
    <div class="mask half">
      <div class="fill"></div>
      <div class="fill fix"></div>
    </div>
    <div class="shadow"></div>
  </div>
  <div class="inset">
    <div class="percentage">
      <div class="numbers">
        <span>0%</span>
      </div>
    </div>
  </div>
</div>