使用setInterval来替换api中的文本

Using setInterval to replace text from api

本文关键字：文本 api 替换 setInterval 使用      更新时间：2023-09-26

当按钮被点击时，我希望我的文本每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;

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

API还从数据库中返回一个随机笑话，因此您可以向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>

相关文章：