javascript - 将内容添加到选取框间隔

Question

如何使用 JavaScript 每 20 秒更新字幕中的内容？
我的意思是，在前 20 秒他读取第一个对象，在第二个 40 秒读取第二个对象，依此类推..，不更新页面，意味着自动更新
这是 JavaScript 函数:

    function read () {
  $.getJSON("jsons/jobs.json", function(json) {
  Thejobs = json;
  for(var k in Thejobs.Studies){
     $('#boxContent').append('<br>'+"position: "+Thejobs.Studies[k].position+
     '<br>'+"Academy: "+Thejobs.Studies[k].academy+'<br>'+"address: "
     +Thejobs.Studies[k].address+'<br>'+"Description: "+Thejobs.Studies[k].jobDescription)
     $('#boxContent').append("<br>_____________________");
     }}); }

这是我的 json 文件:

   {"Studies": {
    "jobID1": {
        "position": "student position",
        "academy": "Haifa University",
        "address": "haifa,isreal",
        "jobDescription": "Big data"
    },
    "jobID2": {
        "position": "Research 1",
        "academy": "saarland University",
        "address": "saarbrucken , germany",
        "jobDescription": "Electronic engineer"
    },
    "jobID3": {
        "position": "Studie 1",
        "academy": "Technion",
        "address": "haifa,isreal",
        "jobDescription": "Speed of internet"
    },
    "jobID4": {
        "position": "Studie 2",
        "academy": "Technion",
        "address": "USA ,los angeles",
        "jobDescription": "analysis data "
    }
}

}

html 文件:

  <marquee direction="up" scrollamount="2">
  <p id="boxContent"></p>
   </marquee>

我已经尝试过，但没有成功:

<script>
var myVar = setInterval(joobs(), 20000);
var ii=0;
function joobs(){
  $.getJSON("jsons/jobs.json", function(json) {
   Thejobs = json;
     $('#boxContent').append('<br>'+"position: 
   "+Thejobs.Studies[ii].position+
    '<br>'+"Academy: "+Thejobs.Studies[ii].academy+'<br>'+"address: "
    +Thejobs.Studies[ii].address+'<br>'+"Description: 
  "+Thejobs.Studies[ii].jobDescription)
    $('#boxContent').append("<br>_____________________");
   });
     ii=ii+1; 
      </script>

Answer 1

我无法抗拒做出这种令人厌恶的事情。

如果您需要定期执行某些操作，请使用 setInterval 。其签名为 setInterval(callback_function, Interval_in_milliseconds); 只需将函数更改为 marquee 的值作为回调，并将间隔设置为 20000 code> 延迟 20 秒。您的函数将每 20 秒调用一次，如我的以下示例所示。

var values = ["Marquees", "shall", "never", "die.", "Long", "live", "the", "marquee!"];
var iterator = 1;
var colorator = 0;
function updateMarquee() { 
  document.getElementById('boxContent').innerHTML = values[iterator];
  iterator = (iterator + 1) % values.length;
  console.log("updateMarquee() has been called");
  
  return function() {
    console.log("updateMarquee() return value was called instead of the function");
  };
}

setInterval(updateMarquee, 1000);
setInterval(updateMarquee(), 10000);

<marquee direction="right" scrollamount="10" behavior="alternate">
  <p id="boxContent">Marquees</p>
</marquee>

更新:关于 user78403 的回答，我更新了我的代码片段，以显示在 setInterval 中调用函数本身和调用函数返回值之间的区别。在示例中，您将看到每秒都会记录 updateMarquee() 已被调用，因为 setInterval(updateMarquee, 1000); 行。但您还会看到 updateMarquee() 返回值被调用，而不是函数 每 10 秒记录一次，因为 setInterval(updateMarquee(), 10000);

<小时/>

附注不要使用天棚。在网站上自动移动、播放、更改任何内容在 20 年前可能会令人兴奋，但现在这很烦人，用户会因此看不起您的网站。您应该只有一份静态的职位列表，用户可以按照自己的节奏阅读。