Страница перезагрузки Javascript после завершения загрузки API

В настоящее время я работаю над клоном Worlde, написанным на JavaScript. Я использовал быстрый API для получения пятибуквенного слова в функции под названием getWord.

Я также использовал функцию с именем OnceADay, поэтому функция getWord вызывается только один раз. В конце функции OnceAday я вызываю location.reload(), поэтому после загрузки нового слова веб-сайт должен обновиться, поэтому вы можете начать игру снова. Моя проблема в том, что функция перезагрузки страницы работает так быстро, что не позволяет выборке получить новое слово. Я пробовал async/await, но это не сработало. Я также пытался отложить обновление ... но это не работает надежно. Я также попытался сохранить последнее слово в локальном объекте и реализовать цикл while в функции OnceADay.. поэтому, пока предыдущее слово равно текущему слову, оно должно повторить выборку. но это просто разбило весь сайт. На данный момент я не знаю, как я могу это исправить. У меня просто закончились варианты здесь. Я новичок в JavaScript, поэтому я надеюсь, что кто-то, у кого больше опыта, может дать мне решение. Я получил весь проект в своем репозитории git ( https://github.com/dodoo86/WordleJS)

Кроме того, вот функции, о которых я упоминал выше.

Вот как я получаю слово, используя асинхронное ожидание

async function fetchWordJSON() {
    const response = await fetch('https://squirrelle.onrender.com/word');
    const word = await response.json();
    return word;
}

Чем я проверяю, прошел ли день

function hasOneDayPassed() {
    var date = new Date().toLocaleDateString();
    if (localStorage.yourapp_date == date)
        return false;

    localStorage.yourapp_date = date;
    return true;
}

Чем если это так, он должен запускать следующие вещи один раз в день

  function runOncePerDay() {
    if (!hasOneDayPassed()) return false;

 

    fetchWordJSON().then(word => {
        word;
        localStorage.setItem("wor", word)
    });

    console.info("Word  ", localStorage.getItem("wor"));

    localStorage.setItem("Won", "false");
    wordle = localStorage.getItem("wor").toUpperCase();
    console.info("WordUPSCALE  ", wordle);
    checkLastWinDates();
    localStorage.setItem("gamePlayed", "false");
    location.reload();

}

Таким образом, он обновляет сайт до того, как он сможет получить его, поэтому слово остается прежним, когда я устанавливаю часы на следующий день. Если делаю сброс с задержкой, то работает совсем ненадежно. Я добавил задержку в 2000 минут, и если бэкенд немного медленнее, чем обычно, он не обновляет слово, если быстрее. Поэтому мне нужен пуленепробиваемый метод, чтобы слово всегда обновлялось перед страницей.

"он просто обрушил весь сайт" - что это значит?

Nico Haase 19.12.2022 14:06

Чтобы цикл while продолжался без перерыва, я использую код code while (localStorage.getItem("lastWordle") == localStorage.getItem("wor") { getWord(); if (localStorage.getItem("lastWordle") ! = localStorage.getItem ("работа") { перерыв} }

David T Laszlo 19.12.2022 14:10

Как долго вы ожидаете, что пользователь будет сидеть перед вашей открытой страницей, чтобы это стало релевантным в первую очередь?

CBroe 19.12.2022 14:11

Просто поместите остальную часть кода внутри обратного вызова then.

Keith 19.12.2022 14:13

что? я не понимаю ваш ответ .. его не нужно открывать, так как обратный отсчет сохраняется в локальном объекте, пользователь может закрыть браузер

David T Laszlo 19.12.2022 14:13

@ Кит, я попробую, спасибо fetchWordJSON().then(word => { word; localStorage.setItem("wor", word) console.info("Word ", localStorage.getItem("wor")); localStorage.setItem("Won", "false"); wordle = localStorage.getItem("wor").toUpperCase(); console.info("WordUPSCALE ", wordle); checkLastWinDates(); localStorage.setItem("gamePlayed", "false"); location.reload(); }); ты имеешь в виду вот так?

David T Laszlo 19.12.2022 14:15

Да, так как это будет ждать запуска fetchWordJSON, альтернативой будет использование async / await, но для чего-то столь же простого это не требуется.

Keith 19.12.2022 14:16

Отвечает ли это на ваш вопрос? Как вернуть ответ при асинхронном вызове?

gre_gor 19.12.2022 15:33
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
3
8
58
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вы должны поместить перезагрузку внутрь блока then, чтобы она выполнялась после выборки.

function runOncePerDay() {
    if (!hasOneDayPassed()) return false;

    fetchWordJSON().then(word => {
        word;
        localStorage.setItem("wor", word);
        console.info("Word  ", localStorage.getItem("wor"));
        localStorage.setItem("Won", "false");
        wordle = localStorage.getItem("wor").toUpperCase();
        console.info("WordUPSCALE  ", wordle);
        checkLastWinDates();
        localStorage.setItem("gamePlayed", "false");
        location.reload();

});

}

Спасибо, Кит и Рэйчел, и для всех вас, кажется, это работает именно так.

David T Laszlo 19.12.2022 14:35

Обещания выполняются асинхронно. В вашем коде здесь:

function runOncePerDay() {
    ...
    fetchWordJSON().then(word => {
        word;
        localStorage.setItem("wor", word)
    });
    ...
    location.reload();
}

Обратный вызов, переданный в .then(), ожидает выборки, но выполнение остальной части функции runOncePerDay продолжается, и вызывается location.reload(), таким образом перезагружая страницу до завершения выборки. (Это состояние гонки)

Чтобы исправить это, поместите location.reload() после логики обратного вызова .then(). Таким образом, все в вашем локальном хранилище устанавливается до того, как произойдет перезагрузка.

Другие вопросы по теме