javascript - 如何显示正在加载的内容如下：正在加载。加载..加载

Question

我正在制作石头剪刀布，我想表明它正在将手与 3 个点加载进行比较

Example: 0s = Comparing Hands. 0.2s = Comparing Hands.. 0.4s = Comparing Hands...

并且基本上在循环中重复

https://pastecode.xyz/view/408bfc08

标签： javascripthtml

Answer 1

您可以使用setInterval()来做到这一点。

在评估结果之前开始一个间隔。然后在评估后清除间隔。

在区间函数内显示"Comparing Hands..."文本，省略号中有不同数量的点。

现场示例：

const compareHands = () => {

  const winner = document.querySelector(".winner");

  var i = 1;

  var intervalId = setInterval(() => {
    winner.textContent = "Comparing Hands";

    i = i % 3;

    for (var j = 0; j < i; j++) {
      winner.textContent += "."
    }

    i++;
  }, 200);


  setTimeout(() => {
    // Code
  
    winner.textContent = "It is a tie";

    // Code

    clearInterval(intervalId);
  }, 5000);
};

compareHands();

<p class="winner"></p>