Javascript 节点终端动画不工作（它仅显示数组中的前两项）

我正在尝试为一个关于食物的CLI创建一个终端动画。当我提出一个请求时，我想运行一个加载动画，直到承诺得到解决。动画由两个数组组成，一个表示一个人张开和闭上嘴巴，另一个表示要吃的“三明治”（一堆等号）。见下文

var face = [":D", ":|"];
var sandwich = ['======', '=====', '====', '===', '==', '='];

我使用

setInterval

增加x和y的值（它们代表各自数组的索引），直到它们达到阈值。对于

face

而言，阈值为1（因为第一个索引为0），对于

sandwich

而言，阈值为5

我想做的是，随着x/y值的增加，它们各自数组中的下一项将写入控制台。请参阅下面的代码

const muncher = () =>{
    var face = [":D", ":|"];
    var sandwich = ['======', '=====', '====', '===', '==', '='];
    var x = 0;
    var y = 0;
    return setInterval(() => {
        process.stdout.write("\r" + face[x++] + sandwich[y++]);
        x &= 1;
        y &= 5;
    }, 250);
};

一旦

y

为5且

x

为1，它们应返回到0并重新开始递增。而不是三明治每次都变得越来越少（

===

..

===

..

====

..等等），但两个数组似乎只是在第一个和第二个元素之间切换。对于

sandwich

，它看起来是这样的：

===

和

===

。我还试着使数组长度相等，并使

x

和

y

为相同的数字，但仍然不起作用

我的问题发生在节点中，但为了更好地说明我的问题，我在代码段中将其改编为浏览器JS

var targ=document.getElementById（'muncher'）；
常量muncher=（）=>{
变量面=[“：D”，“：|”]；
//还尝试了var face=[“：D”、“：|”、“：/”、“：o”、“：D”、“：|”]；
var sandwich=['==='、'=='、'=='、'=='、'=='、'=='、'=='、'=']；
var x=0；
var y=0；
返回设置间隔（（）=>{
target.innerText=“\r”+面[x++]+三明治[y++]；
x&=1；
//当面与三明治的长度相同时，也尝试了x&=5
y&=5；
}, 250);
};
muncher（）

---

我猜您的问题是位运算符，它将x和y的值分别更改为0和1。像这样的东西应该有用

var targ=document.getElementById（'muncher'）；
常量muncher=（）=>{
变量面=[“：D”，“：|”]；
//还尝试了var face=[“：D”、“：|”、“：/”、“：o”、“：D”、“：|”]；
var sandwich=['==='、'=='、'=='、'=='、'=='、'=='、'=='、'=']；
var x=0；
var y=0；
返回设置间隔（（）=>{
target.innerText=“\r”+面[x++]+三明治[y++]；
x=x>1？0:x；
y=y>5？0:y；
}, 250);
};
muncher（）

我遇到了一个问题（使用

stdout.write（）

而不是您上面的代码），光标在终端中移动，但字符没有更新。我所要做的就是添加

process.stdout.clearLine（）

作为

setInterval

中的第一行，它现在与您的解决方案一起工作。干杯