如何在用JavaScript或NodeJs编写的控制台应用程序中制作加载动画？

Question

如何在用JavaScript或NodeJs编写的控制台应用程序中制作加载动画？

示例动画或其他动画.

1. --
2. \
3. |
4. /
5. --

Answer 1

浏览器控制台不太可能.在Node.js中:

var twirlTimer = (function() {
  var P = ["\\", "|", "/", "-"];
  var x = 0;
  return setInterval(function() {
    process.stdout.write("\r" + P[x++]);
    x &= 3;
  }, 250);
})();

Answer 2

您也可以在浏览器控制台中执行此操作：

var loading = (function() {
  var h = ['|', '/', '-', '\\'];
  var i = 0;

  return setInterval(() => {
    i = (i > 3) ? 0 : i;
    console.clear();
    console.log(h[i]);
    i++;
  }, 300);
})();

// clearInterval(loading) to stop it.

Answer 3

setInterval() 方法每隔 250 毫秒以指定的时间间隔（以毫秒为单位）调用函数或计算表达式，p 数组中的值将打印在控制台上。setTimeout() 方法在指定的毫秒数后调用函数或计算表达式。setInterval 在这里用作循环。使用 clearInterval，循环在 5000 毫秒后使用 setTimeout 中断。

const P = ['\\', '|', '/', '-'];
let x = 0;
const loader = setInterval(() => {
  process.stdout.write(`\r${P[x++]}`);
  x %= P.length;
}, 250);

setTimeout(() => {
  clearInterval(loader);
}, 5000);