我正在尝试为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>
我想您的问题是按位运算符,它将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"/>