jquery循环进度显示

Question

我想显示循环函数的进度，比如“1 of Total 1000”

我用这个代码

for (i = 1; i <= 1000; i += 1) {
   $('#mycontent article').html(i + ' of total 1000');
}

但在 #mycontent 文章中仅显示 i 的最后一个值。

请指教。

Answer 1

JavaScript 是单线程的。在这种情况下，这意味着该循环将在 UI 更新之前运行完成，因此 UI 只会看到最后的更改。

退一步...您希望 UI 更新的视觉速度有多快？即使用户界面正在更新，这也会“如此之快”，以至于这并不重要。比如说 10 毫秒的间隔怎么样？关键字是“interval”，因为您可以使用 setInterval 来实现此目的。例如：

let i = 1;
let interval = setInterval(function () {
  $('#mycontent article').html(i + ' of total 1000');
  i++;
  if (i > 1000) {
    clearInterval(interval);
  }
}, 10);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="mycontent"><article></article></div>

代码的执行将被阻止，直到循环完成 - 因此您只能看到最后一个值。

Answer 2

此外，你不需要 JavaScript（只要 Firefox 实现了这一点）——它可以用
@property

和

counter

 在纯 CSS 中完成：

@property --from {
  syntax: '<integer>';
  initial-value: 0;
  inherits: false;
}

.counter {
  transition: --from 1s;
  counter-reset: int var(--from);
  animation: counter var(--time, 1000) forwards ease-in-out;
}

.counter::after {
  content: counter(int);
}

@keyframes counter {
  to {
    --from: var(--to, 100);
  }
}

<span class="counter" style="--from:0; --to:1000; --time:4s;"></span>