Question

我正在尝试实现一个简单的TextDisplay。下面的代码可以更好地解释这个例子：

var poem = {
    en: {
        l1 : "Take this kiss upon the brow!",
        l2 : "And, in parting from you now,",
        l3 : "Thus much let me avow",
        l4 : "You are not wrong, who deem",
        l5 : "That my days have been a dream;",
        l6 : "Yet if hope has flown away",
        l7 : "In a night, or in a day,",
        l8 : "In a vision, or in none,",
        l9 : "Is it therefore the less gone?",
        l10: "All that we see or seem",
        l11: "Is but a dream within a dream."
    },
    it: { 
        l1 : "Questo mio bacio accogli sulla fronte!",
        l2 : "E, da te ora separandomi,",
        l3 : "lascia che io ti dica",
        l4 : "che non sbagli se pensi",
        l5 : "che furono un sogno i miei giorni;",
        l6 : "e, tuttavia, se la speranza volò via",
        l7 : "in una notte o in un giorno,",
        l8 : "in una visione o in nient'altro,",
        l9 : "e' forse per questo meno svanita?",
        l10: "Tutto quello che vediamo, quel che sembriamo",
        l11: "non è che un sogno dentro un sogno." 
    }
},
jsonTime = {
    t1 : 3000,
    t2 : 3250,
    t3 : 2985,
    t4 : 3125,
    t5 : 3625,
    t6 : 3100,
    t7 : 3400,
    t8 : 2843,
    t9 : 3123,
    t10: 2964,
    t11: 3150
};


function sayPoem(poem, lang){

};

正如你所看到的，我有一个诗歌的对象包含同一首诗的几种语言，第二个对象是在诗的每一行中以毫秒为单位包含寿命的人。

知道如何实现这个结果？提前谢谢。

Answer 1

从对象键创建一些数组（使线条更容易迭代），并使用setTimeout显示文本。

function sayPoem(poem, jsonTime, lang) {
    var count = 0;
    var obj = poem[lang];
    var poemKeyArr = Object.keys(obj);
    var timeKeyArr = Object.keys(jsonTime);
    var div = document.getElementById('poem');
    var line, time, timer;
    var showText = function showText() {
        if (count < poemKeyArr.length) {
            line = poemKeyArr[count];
            time = timeKeyArr[count++];
            div.textContent = obj[line];
            timer = setTimeout(showText, jsonTime[time]);
        } else {
          clearTimeout(timer);
        }
    }
    showText();
}

sayPoem(poem, jsonTime, 'en');

DEMO

在纯Javascript中定时Json

1 个答案: