时间戳

首页 > 解决方案 > 节点终端动画不起作用（它只显示数组中的前两项）

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 和x1，它们应该回到 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>

标签： javascriptnode.jsterminalcommand-line-interface

解决方案

我猜你的问题是按位运算符，它将 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"/>

推荐阅读