通過超時變量json循環，javascript

我有一個問題，使我的基於Web的遊戲介紹。這基本上是一個小場景，兩個人用泡泡互相交談。我決定使用json和ES6 JavaScript。通過超時變量json循環，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>

現在，我想做的事是通過腳本中的dialouge進行循環，以便每個角色輪流說話，文本顯示給定的秒數（定時器值）。

我測試了setTimeout，但無濟於事。我試圖理解這是如何與回調工作，但我沒有得到這個工作。我也研究過承諾，但我真的不知道如何讓它在循環中工作。

當我想到如何做到這一點時，似乎很簡單，但現在我已經堅持了幾個小時。

來源

2016-02-21 Winter

由於沒有人回答我以爲我會發布我自己的解決方案，即使它可能不是最美麗的解決方案。

首先，我錯了，說我正在使用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; 
    }); 
};

來源

2016-04-07 18:38:46 Winter

通過超時變量json循環，javascript

回答

相關問題