Node终端动画不起作用（它仅显示数组中的前两项）

Question

我正在尝试为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');
const muncher = () => {
    var face = [":D", ":|"];
    //also tried var face = [":D", ":|", ":/", ":o", ":D", ":|"];
    var sandwich = ['======', '=====', '====', '===', '==', '='];
    var x = 0;
    var y = 0;
    return setInterval(() => {
        targ.innerText = "\r" + face[x++] + sandwich[y++];
        x &= 1;
        // also tried x&= 5 when face is the same length as sandwich
        y &= 5;
    }, 250);
};

muncher()

<div id='muncher'>
</div>

Answer 1

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

var targ = document.getElementById('muncher');
const muncher = () => {
    var face = [":D", ":|"];
    //also tried var face = [":D", ":|", ":/", ":o", ":D", ":|"];
    var sandwich = ['======', '=====', '====', '===', '==', '='];
    var x = 0;
    var y = 0;
    return setInterval(() => {
        targ.innerText = "\r" + face[x++] + sandwich[y++];
        x = x > 1 ? 0 : x;
        y = y > 5 ? 0 : y;
    }, 250);
};

muncher()

<div id="muncher"/>