每 n 秒获取一个新值

Question

我有一个显示报价的网页。我随机选择其中一个引号。目前它每次加载网页时都会这样做，我现在希望它每 5 秒选择一个。我是初学者，不知道如何最好地实现这一点，也不知道适当的功能。 setInterval?、setTimeout?、delay?、wait?

var quotes = JSON.parse('{\
    "0": "Don\'t worry about what anybody else is going to do. The best way to predict the future is to invent it. -- Alan Kay", \
    "1": "Keep away from people who try to belittle your ambitions. Small people always do that, but the really great make you feel that you, too, can become great. -- Mark Twain", \
    "2": "No problem should ever have to be solved twice. -- Eric S. Raymond, How to become a hacker", \
    "3": "Attitude is no substitute for competence. -- Eric S. Raymond, How to become a hacker", \
    "4": "It is said that the real winner is the one who lives in today but able to see tomorrow. -- Juan Meng", \
    "5": "Fools ignore complexity. Pragmatists suffer it. Some can avoid it. Geniuses remove it. -- Alan J.Perlis(Epigrams in programming)", \
    "6": "A year spent in artificial intelligence is enough to make one believe in God. -- Alan J.Perlis(Epigrams in programming)" \
}');

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}
var num = Math.floor(getRandomArbitrary(0, Object.keys(quotes).length));

document.getElementById('quote').innerHTML = quotes[num];

如前所述，我现在希望 ID 'quote' 中的值每 5 秒更新一次。所以我认为这意味着更新num var？

Answer 1

您确实可以使用 setInterval 来完成此操作。尝试像这样添加 setInterval：

var quotes = JSON.parse(
      '{\
      "0": "Don\'t worry about what anybody else is going to do. The best way to predict the future is to invent it. -- Alan Kay", \
      "1": "Keep away from people who try to belittle your ambitions. Small people always do that, but the really great make you feel that you, too, can become great. -- Mark Twain", \
      "2": "No problem should ever have to be solved twice. -- Eric S. Raymond, How to become a hacker", \
      "3": "Attitude is no substitute for competence. -- Eric S. Raymond, How to become a hacker", \
      "4": "It is said that the real winner is the one who lives in today but able to see tomorrow. -- Juan Meng", \
      "5": "Fools ignore complexity. Pragmatists suffer it. Some can avoid it. Geniuses remove it. -- Alan J.Perlis(Epigrams in programming)", \
      "6": "A year spent in artificial intelligence is enough to make one believe in God. -- Alan J.Perlis(Epigrams in programming)" \
    }'
    );
    
    function getRandomArbitrary(min, max) {
      return Math.random() * (max - min) + min;
    }
    
    function updateQuote() {
      var num = Math.floor(getRandomArbitrary(0, Object.keys(quotes).length));
      document.getElementById("quote").innerHTML = quotes[num];
    }
    
    updateQuote();
    setInterval(updateQuote, 5000);

<h3 id="quote"></h3>

setInterval 的第二个参数接受毫秒数，所以在你的情况下这是 5000。阅读更多 here

Answer 2

@shmink，很高兴你想出了代码来填充一个 div，我添加了一个 sn-p 来在 setInterval 中调用它，它每 5 秒更新一次。确保在您离开后调用 clearInterval 以停止 setInterval（移动到其他页面，关闭）。

var quotes = JSON.parse('{\
    "0": "Don\'t worry about what anybody else is going to do. The best way to predict the future is to invent it. -- Alan Kay", \
    "1": "Keep away from people who try to belittle your ambitions. Small people always do that, but the really great make you feel that you, too, can become great. -- Mark Twain", \
    "2": "No problem should ever have to be solved twice. -- Eric S. Raymond, How to become a hacker", \
    "3": "Attitude is no substitute for competence. -- Eric S. Raymond, How to become a hacker", \
    "4": "It is said that the real winner is the one who lives in today but able to see tomorrow. -- Juan Meng", \
    "5": "Fools ignore complexity. Pragmatists suffer it. Some can avoid it. Geniuses remove it. -- Alan J.Perlis(Epigrams in programming)", \
    "6": "A year spent in artificial intelligence is enough to make one believe in God. -- Alan J.Perlis(Epigrams in programming)" \
}');

function updateUI() {
var num = Math.floor(getRandomArbitrary(0, Object.keys(quotes).length));

document.getElementById('quote').innerHTML = quotes[num];
}

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

var interval = setInterval(updateUI, 5000);

//cleanup
//clearInterval(interval);

<div id="quote"></div>

Answer 3

您可以使用setInterval，它重复调用一个函数或执行一段代码sn-p，具有固定的时间延迟，并且在回调函数内部每次都得到一个新的num。

var quotes = JSON.parse('{\
    "0": "Don\'t worry about what anybody else is going to do. The best way to predict the future is to invent it. -- Alan Kay", \
    "1": "Keep away from people who try to belittle your ambitions. Small people always do that, but the really great make you feel that you, too, can become great. -- Mark Twain", \
    "2": "No problem should ever have to be solved twice. -- Eric S. Raymond, How to become a hacker", \
    "3": "Attitude is no substitute for competence. -- Eric S. Raymond, How to become a hacker", \
    "4": "It is said that the real winner is the one who lives in today but able to see tomorrow. -- Juan Meng", \
    "5": "Fools ignore complexity. Pragmatists suffer it. Some can avoid it. Geniuses remove it. -- Alan J.Perlis(Epigrams in programming)", \
    "6": "A year spent in artificial intelligence is enough to make one believe in God. -- Alan J.Perlis(Epigrams in programming)" \
}');

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}
// you need this value only once so no need to get it at every interval
let maxVal =Object.keys(quotes).length);
setInterval(() => {
  var num = Math.floor(getRandomArbitrary(0,maxVal);
  document.getElementById('quote').innerHTML = quotes[num];
}, 5000)

<div id='quote'></div>