setTimeout on if else 语句

Question

我正在创建一个第一个网站，并希望有一个 0-100% 的进度条，它有几秒钟的延迟才能在开始时首先淡入（我可以在 CSS 中做到这一点），但进度当我输入以下内容时，条形脚本似乎没有延迟：

HTML：

<div class="loading">
    <div class="percent">100%</div>
    <div class="progress-bar">
        <div class="progress"></div>
    </div>
</div>

Javascript：

var percent = document.querySelector(".percent");
var progress = document.querySelector(".progress");
var count = 1;
var per = 1;
var loading = setInterval(animate, 25);

setTimeout(animate, 2000);

function animate() {
  if (count == 100 && per == 100) {
    clearInterval(loading);
  } else {
    per = per + 1;
    count = count + 1;
    progress.style.width = per + "px";
    percent.textContent = count + "%";
  }
} 

我已经尝试过了，但这甚至没有为进度条设置动画：

setTimeout(function animate() {
  if (count == 100 && per == 100) {
    clearInterval(loading);
  } else {
    per = per + 1;
    count = count + 1;
    progress.style.width = per + "px";
    percent.textContent = count + "%";
  }
}, 2000);

我还尝试将 setTimeout 放入一个名为 timeInMilliseconds 的 var 中，设置为 2000，然后用它代替时间，但这没有用。

抱歉，如果答案真的很明显，这是全新的，我一直在尝试尽可能多地学习教程。提前致谢。

Answer 1

你离得太近了！

所有相关动作都在这里发生：

var loading = setInterval(animate, 25);

setTimeout(animate, 2000);

发生的事情是这样的：一旦var loading = setInterval(animate, 24); 被评估，浏览器就会开始每24 毫秒调用一次animate 函数。然后，2 秒后，它再次调用animate（但是，这一次它没有做任何新的事情，因为count 和per 仍然等于100）。

这里有一个修复，一步一步：

1. 我们知道我们想要在延迟 2 秒后执行某项操作。让我们概括一下您目前的情况：

setTimeout(() => {
  // we want to start our animation loop here
}, 2000);

1. 2 秒后我们想做什么？也就是说，我们传递给setTimeout 的函数的主体是什么？就是上面已经写好的循环逻辑：

setTimeout(() => {
  loading = setInterval(animate, 25);
}, 2000);

总而言之，这个片段现在等待 2 秒，然后开始循环您的 animate 函数。

最后一件事！ 即使loading 直到超时内才分配，我们仍然需要在全局范围内声明它（这样animate 可以访问它） . 所以我们的修改看起来像这样：

var percent = document.querySelector(".percent");
var progress = document.querySelector(".progress");
var count = 1;
var per = 1;
var loading; // <- Still declared in the global scope

setTimeout(() => {
  loading = setInterval(animate, 25);
}, 2000);

function animate() {
  if (count == 100 && per == 100) {
    clearInterval(loading);
  } else {
    per = per + 1;
    count = count + 1;
    progress.style.width = per + "px";
    percent.textContent = count + "%";
  }
} 

Answer 2

您需要一个在 2 秒后调用 setInterval 的函数。从那里调用setInterval 并将loading 分配给间隔。 loading 变量是全局变量，所以 animate 也可以访问它。

然后用setTimeout函数调用启动动画的函数来设置延迟。

var percent = document.querySelector(".percent");
var progress = document.querySelector(".progress");
var count = 1;
var per = 1;
var loading;

setTimeout(startAnimation, 2000);

function startAnimation() {
  loading = setInterval(animate, 25);
}

function animate() {
  if (count == 100 && per == 100) {
    clearInterval(loading);
  } else {
    per = per + 1;
    count = count + 1;
    progress.style.width = per + "px";
    percent.textContent = count + "%";
  }
}

.progress {
  height: 10px;
  width: 0px;
  background-color: green;
}

.progress-bar {
  width: 100px;
  background-color: grey;
}

<div class="loading">
    <div class="percent">0%</div>
    <div class="progress-bar">
        <div class="progress"></div>
    </div>
</div>