if else 语句中的 setTimeout

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

您需要一个在 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>

Answer 2

你太接近了！

所有相关操作都在此处进行：

var loading = setInterval(animate, 25);

setTimeout(animate, 2000);

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

这是一步一步的修复方法：

我们知道我们想要在延迟 2 秒后做某事。让我们概括一下您目前拥有的内容：

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

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 + "%";
  }
}

if else 语句中的 setTimeout

setTimeout on if else statement

html

javascript

animation

function

settimeout