时间戳

首页 > 解决方案 > setTimeout on if else 语句

javascript - setTimeout on if else 语句

问题描述

我正在制作一个第一个网站，并希望有一个 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，然后用它代替时间，但这没有用。

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

标签： javascripthtmlfunctionanimationsettimeout

解决方案

你这么近！

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

var loading = setInterval(animate, 25);

setTimeout(animate, 2000);

正在发生的事情是这样的：一旦var loading = setInterval(animate, 24);被评估，浏览器就会开始animate每 24 毫秒调用一次你的函数。然后，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 + "%";
  }
}

推荐阅读