具有延迟的JavaScript对象的重复迭代

Question

我有带引号的JavaScript对象，我有HTML元素，将由这些引号填充。我希望每个报价都在那里5秒钟。我也希望它重复一遍。因此，当使用最后一个引用时，函数再次启动。到目前为止，我有这个。

var quote = document.getElementById("quote");
var quotes = {
    "q1": "q1",
    "q2": "q2",
    "q3": "q3"
}

function quoteChange(){
    for (var key in quotes){
        quote.innerHTML = quotes[key];      
    };
};
quoteChange();

Answer 1

使用重复调用setTimeout的{​​{1}}：

quoteChange

var quote = document.getElementById("quote");
var quotes = {
    "q1": "q1",
    "q2": "q2",
    "q3": "q3"
}

let i = 0;
const quoteStrings = Object.entries(quotes);
function quoteChange(){
  quote.textContent = quoteStrings[i][0] + ' : ' + quoteStrings[i][1];
  i = (i + 1) % quoteStrings.length;
  setTimeout(quoteChange, 5000);
}
quoteChange();

不确定为什么<span id="quote"></span>是一个对象，根据你使用它的方式，它会更有意义。

确保在设置文本内容时使用quotes - 在插入HTML字符串时仅使用textContent。