Функция вызывается по несколько раз. JavaSript

Question

Если не включать checkbox то программа работает так, как я и ожидаю. Но если включить checkbox то количество вызовов функции checkAfterEvent увеличивается на столько раз - сколько раз нажали на checkbox. Задача checkbox-а перемешать массив индексов, чтобы слова выводились случайно. Я не понимаю почему функция checkAfterEvent отрабатывает то количество раз, сколько я клацнул по checkbox-у и как мне сделать так, чтобы функция checkAfterEvent срабатывала лишь один раз?

let arrayIndexes = [];
let checkbox = document.querySelector(".checkbox");
let input = document.querySelector(".input");
let out = document.querySelector(".out");
let outResult = document.querySelector(".out-result");
let arrayTutorial;


let task = [
  ["school", "школа"],
  ["table", "стол"],
  ["friend", "друг"],
  ["girl", "девочка"],
  ["laptop", "ноутбук"],
  ["ship", "корабль"],
  ["sea", "море"],
  ["blue", "синий"],
  ["color", "цвет"],
  ["red", "красный"]
];

// функция для сортировки массива по возростанию
function compareNumbers(a, b) {
  return a - b;
}

// функция перемешивания массива по Фишеру-Йетсу
function shuffle(Indexes) {
  for (let i = arrayIndexes.length - 1; i > 0; i--) {
    let randomIndex = Math.floor(Math.random() * (i - 1));
    let temp = arrayIndexes[i];
    Indexes[i] = Indexes[randomIndex];
    Indexes[randomIndex] = temp;
  }
  return Indexes;
}

// функция задержки
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// функция вывода на экран слова
function outTask() {
  out.textContent = "";
  out.textContent = arrayTutorial[arrayIndexes[0]][1];
  input.focus();
}

// вызов функции по событию
function checkboxRandom() {
  checkbox.addEventListener("change", () => {
    changeCheckboxRandom();
  });
}

// функция проверяет введенные данные, выводит результат и вызывает вывод нового слова
function check() {
  async function checkAfterEvent() {
    let word = input.value;
    // ЭТО УСЛОВИЕ НЕ ДОЛЖНО НИКОГДА ВЫПОЛНЯТЬСЯ
    if (input.value == "") {
      console.log("XXXXXXXXXXXXXXXXXXX");
    }
    input.value = "";

    if (word == arrayTutorial[arrayIndexes[0]][0]) {
      outResult.textContent = "ТЫ ПРАВ";
      arrayIndexes.shift();
      await sleep(2000);
      outResult.textContent = "";
      outTask(arrayTutorial);
    } else {
      outResult.textContent = "ТЫ ОШИБСЯ";
      arrayIndexes.shift();
      await sleep(4000);
      outResult.textContent = "";
      outTask(arrayTutorial)
    }
  }
  input.addEventListener("keydown", event => {
    if (event.code === "Enter") {
      event.preventDefault();
      input.blur();
      checkAfterEvent();
    }
  });
}

// функция сортировки массиву индексов
function createArrayIndexes() {
  let indexUpperLimit = arrayTutorial.length;
  for (let i = 0; i < indexUpperLimit; i++) {
    arrayIndexes.push(i);
  }
  return arrayIndexes;
}

// эта функция вызывается при изменении checkbox-а
function changeCheckboxRandom() {
  if (checkbox.checked === true) arrayIndexes = shuffle(arrayIndexes);
  else arrayIndexes = arrayIndexes.sort(compareNumbers);
  // функция вывода нового слова
  outTask();
  // функция проверки введённых данных
  check();
}

// СТАРТОВАЯ ФУНКЦИЯ, вызывается лишь один раз
function start(task) {
  arrayTutorial = task;
  // создаём массив индексов
  arrayIndexes = createArrayIndexes();
  checkboxRandom();
  changeCheckboxRandom();
}

start(task);

<textarea class="input"></textarea>
<input class="checkbox" type="checkbox">
<div class="out"></div>
<div class="out-result"></div>

Answer 1

функция check() вызывается по событию и каждый раз навешивает сама обработчик. Вот они и размножаются.

Не надо так извращаться с перемешиванием массива. Проще рэндомно получать индекс и по нему вытаскивать из массива элемент.

Не надо вызывать с аргументом outTask(arrayTutorial), если arrayTutorial глобальный и outTask() не ожидает аргументов.

arrayTutorial и arrayIndexes тоже ненужные массивы, когда можно случайно отсортировать сам массив task. Причём одной командой, без цикла:

task.sort( (a,b)=>Math.random()-0.5)

БЛОГ НА HUSL

Функция вызывается по несколько раз. JavaSript

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