Question

我在介绍基于网络的游戏时遇到了一些问题。它基本上是一个小场景，两个人使用语音泡沫互相交谈。我决定使用json和ES6 JavaScript。

我的json看起来像这样：

const script_scene1 = [
    {
        speaker: 'Ted',
        timer: 3000,
        emote: 'normal',
        quote: ''
    },
    {
        speaker: 'Ted',
        timer: 3000,
        emote: 'normal',
        quote: 'Bill, Bill? Where are you?'
    },
    {
        speaker: 'Bill',
        timer: 4000,
        emote: false,
        quote: 'Oh, Ted, I am lost. I think someone kidnapped me.'
    },
    {
        speaker: 'Ted',
        timer: 3000,
        emote: 'normal',
        quote: 'How did they kidnap you?'
    }
];

我的JS看起来像这样：

function playIntro() {
    let intro = document.getElementById("SceneOne");
    intro.style.display= "block";
    playScene(1, intro);
};

function playScene(scene) {
    let currentScript = getScript(scene);

    [].forEach.call(currentScript, function(subScript) {
            playSubScene(subScript);
    });
};

function playSubScene(script) {
    let speaker = script.speaker;
    let emote = script.emote;
    let quote = script.quote;

    let bubbles = document.querySelectorAll("speech");
    [].forEach.call(bubbles, function(bubble) {
        bubble.style.display = "none";
    });

    let bubble = document.getElementById(speaker);
    bubble.style.display = "block";
    bubble.innerHTML = quote;
};

我的HTML就像这样：

<section class="scene1" id="SceneOne">
    <button class="close-button" id="CloseButton">X</button>
    <div class="emoter1">
        <img src="images/ted.png" />
    </div>
    <div class="emoter2">
        <img src="images/bill.png" />
    </div>
    <article class="bubble pos1" id="Ted"></article>
    <article class="bubble pos2" id="Bill"></article>
    <article class="bubble pos3" id="RussetFive"></article>
    <article class="bubble pos4" id="DinkyPinky"></article>
</section>

现在，我想要做的是在我的脚本中循环使用对话框，以便每个角色依次说话并且他们的文本显示给定的秒数（计时器值）。

我测试了setTimeout，但无济于事。我试图理解它如何与回调一起工作，但我没有得到这个工作。我也研究过承诺，但我真的没有看到如何让它在循环中工作。

当我知道如何做到这一点时似乎很简单，但现在我已经被困了几个小时。

Answer 1

由于没有人回答我以为我会发布自己的解决方案，即使它可能不是最漂亮的解决方案。

首先，我错误地说我正在使用json对象，它实际上是一个javascript对象。

我解决它的方法是为每个对象创建一个计时器，在该对象上添加从先前对象开始的时间。也就是说，每一行对话都有自己的计时器。

function playScene(scene) {
    let currentScript = getScript(scene);
    let currentTimer = 0;

    [].forEach.call(currentScript, function(element) {
        setTimeout(function() {
            playSubScene(element);
        }, currentTimer);
        currentTimer = currentTimer + element.timer;
    });
};

循环通过json与超时变量，javascript

1 个答案: