时间戳

首页 > 解决方案 > 我只是从 JS 开始，我真的不明白 setTimeout 是如何工作的

javascript - 我只是从 JS 开始，我真的不明白 setTimeout 是如何工作的

问题描述

我正在开发一个琐事页面，其中包含通过 API 获得的一系列问题。当我在主页上开始游戏时，我想将我重定向到第二个页面，其中将出现可用的类别，当我单击它们时，问题将出现多个答案。

幸运的是，我已经设法做到了所有这些，但是，当我从一个页面切换到另一个页面时，我无法让类别出现。只有当我已经在该页面上并且我创建了一个按钮来调用显示它们的函数时，它们才会出现。

我曾想过以这种方式执行此功能，以便将我切换到另一个页面，然后加载问题，但我无法让它工作。

有没有人有解决方案或知道为什么它不起作用？

function get_dataJson() {
    let data_json = [];
    fetch('https://opentdb.com/api.php?amount=10')
    .then(response => response.json())
    .then(data => data.results.forEach(element => {
        data_json.push(element);
    }));
    return data_json;
}

let trivial_data = get_dataJson();

function startGame() {
    let div_username = document.createElement("div");
    let name = document.createElement("h2");
    name.innerHTML = document.getElementById("name").value;
    div_username.appendChild(name);
    let categories = get_categories(trivial_data);
    
    setTimeout("location.href='./game.html'", 1000);
    
    setTimeout(function(){
        document.getElementById('nav-game').appendChild(div_username);
        show_categories(categories);
    },2000);
}

function get_categories(trivial_data) {
    let categories = [];
    trivial_data.forEach(element => {
        categories.push(element.category)
    });
    console.log(categories);
    return categories;
}

function show_categories (categories) {
    let div_categories = document.createElement("div");
    let count = 0;
    categories.forEach ( element => {
        let element_category = document.createElement("button");
        element_category.innerHTML = element;
        element_category.id = count;
        element_category.onclick = function() {
            get_question(element_category.id);
        };
        count++;
        div_categories.appendChild(element_category);
    });
    div_categories.className = 'categories';
    document.getElementById("categories").appendChild(div_categories);
}


function get_question (pos) {
    document.getElementById("categories").style.displays = 'none';
    let question = document.createElement("h2");
    question.innerHTML = trivial_data[pos].question;

    let correct_answer = trivial_data[pos].correct_answer;
    let incorrect_answers = trivial_data[pos].incorrect_answers;
    let options = incorrect_answers.concat(correct_answer);
    options = options.sort();
    
    let div_choices = document.createElement("div");
    options.forEach(element => {
        let choice = document.createElement('button');
        choice.innerHTML = element;
        choice.id = 'true' ? element == correct_answer : 'false';
        div_choices.appendChild(choice);
    });

    div_choices.className = 'answers';
    document.getElementById("questions").appendChild(question);
    document.getElementById("questions").appendChild(div_choices);
    
}

标签： javascript

解决方案

您应该做的第一件事是确保您了解如何使用fetch异步获取数据

async function get_dataJson() {
    
    const response = await fetch('https://opentdb.com/api.php?amount=10');
    const json = await response.json();
    return json.results;
}

(async function(){
  const trivial_data = await get_dataJson();
  console.log(trivial_data);
})()

然后，与其更改页面，不如留在同一页面上并根据需要添加/删除/隐藏元素 - 看起来你已经对那一点进行了排序。

推荐阅读