javascript - 如何显示某些内容正在加载，例如 : loading. 正在加载..正在加载

Question

我正在创建剪刀石头布，我想展示它正在将手与 3 点加载进行比较

示例:
0s = 比较手牌。
0.2s = 比较双手..
0.4s = 比较双手...

并且基本上循环重复

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

Answer 1

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

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

在间隔函数内显示“比较手...”文本，省略号中的点数量不同。

实例:

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>