Подскажите пожалуйста. Я не силён в JS. Обычно ищу всё сам, а тут не могу просто найти

Question

У меня есть функция квиза на JS. Проблема в том, что блок с результатом выдается сразу/мгновенно. А мне необходима небольшая загрузка перед самим результатом. Во многих видео и примерах даже намёка на это нет. Помогите пожалуйста

window.onload = function () {

    let result = {};
    let step = 0;

    function showQuestion(questionNumber) {
        document.querySelector(".question").innerHTML = quiz[step]['q'];
        let answer = '';
        for (let key in quiz [step]['a']){
            answer += `<li data-v="${key}" class="answer-variant">${quiz[step]['a'][key]}</li>`;
        }
        document.querySelector(".answer").innerHTML = answer;
    }

    document.onclick = function (event) {
        event.stopPropagation();
        if (event.target.classList.contains('answer-variant') && step < quiz.length){
            if (result[event.target.dataset.v] != undefined) {
                result[event.target.dataset.v]++;
            }
            else {
                result[event.target.dataset.v] = 0;
            }
            step++;
            if (step ==quiz.length) {
                document.querySelector('.question').remove();
                document.querySelector('.answer').remove();
                showResult();
            }
            else {
                showQuestion(step);
            }
        }
        console.log(result);
    }

    function showResult(){
        let key = Object.keys(result).reduce(function (a, b) {
            return result [a] > result[b] ? a : b;
        });
        console.log(key);

        let div = document.createElement('div');
        div.classList.add('result');
        div.innerHTML = answers[key]['description'];
        document.querySelector('main').appendChild(div);
    }

    showQuestion(step);
}

Answer 1

Попробуй setTimeout(() => yourFunction(), 500)

Answer 2

Если я правильно понял, за показ результата у вас отвечает функция showResult. Чтобы она вызывалась не сразу, можно обернуть её в setTimeout. Пока результаты "грузятся", можно добавить лоадер. Для этого можете скопировать какой-нибудь css лоадер отсюда https://loading.io/css/ Затем добавить ему класс loader В стилях пропишите дополнительный класс .loader.hidden { display: none } и добавьте на страницу с этими классами. Далее смотрите комментарии в коде ниже:

window.onload = function () {

  let result = {};
  let step = 0;

  function showQuestion(questionNumber) {
    document.querySelector(".question").innerHTML = quiz[step]['q'];
    let answer = '';
    for (let key in quiz [step]['a']){
      answer += `<li data-v="${key}" class="answer-variant">${quiz[step]['a'][key]}</li>`;
    }
    document.querySelector(".answer").innerHTML = answer;
  }

  document.onclick = function (event) {
    event.stopPropagation();
    if (event.target.classList.contains('answer-variant') && step < quiz.length){
      if (result[event.target.dataset.v] != undefined) {
        result[event.target.dataset.v]++;
      }
      else {
        result[event.target.dataset.v] = 0;
      }
      step++;
      if (step ==quiz.length) {
        document.querySelector('.question').remove();
        document.querySelector('.answer').remove();
        /**
         * допустим, есть какой-то лоадер с классом 'loader', который по умолчанию в стилях скрыт с помощью класса
         * 'hidden' (добавляет display: none)
         * Пример css: .loader.hidden { display: none }
         * Покажем его, убрав класс, а в таймауте по истечению времени снова добавляем его и показываем результат
        */
        const loader = document.querySelector(".loader");
        loader.classList.remove("hidden");
        setTimeout(() => {
          loader.classList.add("hidden");
          showResult();
        }, 1000);
      }
      else {
        showQuestion(step);
      }
    }
    console.log(result);
  }

  function showResult(){
    let key = Object.keys(result).reduce(function (a, b) {
      return result [a] > result[b] ? a : b;
    });
    console.log(key);

    let div = document.createElement('div');
    div.classList.add('result');
    div.innerHTML = answers[key]['description'];
    document.querySelector('main').appendChild(div);
  }

  showQuestion(step);
}

БЛОГ НА HUSL

Подскажите пожалуйста. Я не силён в JS. Обычно ищу всё сам, а тут не могу просто найти

Ответы (2 шт):