使用 setInterval 替换 api 中的文本

Question

单击按钮后，我希望我的文本每 3 秒更改一次。我正在使用 setInterval 我可以看到 console.log 中的数字在变化，但文本没有变化，我不知道为什么。

我尝试过的：

setInterval(function() {
                   var quote = jokesArray[jokeNum];
         console.log(jokeTxt.innerHTML = quote);
} 

setInterval(function() {
               if (jokeTxt.innerHTML !== "") {
                   jokeTxt.innerHTML = "";
                   jokeNum++;
                   jokeTxt.innerHTML = jokesArray[jokeNum];
          }


setInterval(function() {
               var quote = jokesArray[Math.floor(Math.random() % 586) + 1];
     console.log(jokeTxt.innerHTML = quote);

完整脚本：

function main() {
        var myApi = "https://api.icndb.com/jokes/random";

        var xhttp = new XMLHttpRequest();
        var jokesArray = [];
        var randomIndex = Math.random();
        var randomizer = (randomIndex % 586) + 1;
        var jokeNum = Math.floor(randomizer);
        var jokeTxt = document.getElementById("jokeTxt");

        xhttp.onreadystatechange = function () {
            if (xhttp.readyState == XMLHttpRequest.DONE) {
                var jokesJSON = JSON.parse(xhttp.responseText);
                var jokes = jokesJSON.value.joke;
                for (var i = 0; i < jokes.length; i++) {
                    jokesArray.push(jokes);
                }
                //allJokes = jokesArray[jokeNum];

                setInterval(function() {
               var quote = jokesArray[Math.floor(Math.random() % 586) + 1];
     console.log(jokeTxt.innerHTML = quote); 

                },3000);
            }
        }

        xhttp.open("GET", myApi, true);
        xhttp.send();
    }

    var myBtn = document.getElementById("btn");
    myBtn.onclick = main;

Answer 1

API 您一次只使用 returns 一个笑话，而不是一组多个笑话。在您的代码中，您将 var jokes 视为许多笑话的数组，但这实际上只是一个字符串 - 即一个笑话。迭代此变量意味着您正在遍历字符串并为笑话中的每个字符执行操作。

API 也是 returns 他们数据库中的一个随机笑话，因此您可以向 API 发送多个请求，而不是构建本地数组并选择随机元素每次都得到一个新的（随机的）笑话。这是对执行此操作的代码的修改：

var jokeTxt = document.getElementById("jokeTxt");

function getJoke() {
  var myApi = "https://api.icndb.com/jokes/random";
  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == XMLHttpRequest.DONE) {
      var jokesJSON = JSON.parse(xhttp.responseText);
      var joke = jokesJSON.value.joke;
      jokeTxt.innerHTML = joke;
    }
  }

  xhttp.open("GET", myApi, true);
  xhttp.send();
}

function startJokes() {
  // get the first joke right away...
  getJoke();
  // ...then get a new joke every 3 seconds
  setInterval(function() {
    getJoke();
  }, 3000);
}

var myBtn = document.getElementById("btn");
myBtn.onclick = startJokes;

<button id="btn">Start the Jokes!</button>
<div id="jokeTxt"><div>

使用 setInterval 替换 api 中的文本

Using setInterval to replace text from api

javascript

setinterval