Изучение JavaScript было для меня дикой поездкой. Я всегда проявлял большой интерес к технологиям, но никогда не брал на себя обязательство учиться и заниматься какой-либо конкретной областью. Таким образом, решение изучать веб-разработку/разработку программного обеспечения через буткемп Flatiron, уже работая полный рабочий день, означало, что я выбрал то, чем я хочу заниматься в жизни в полной мере. Хотя у меня, возможно, больше нет свободного времени, опыт был захватывающим, и изучение новых технологий каждую неделю — это то, чем я наслаждаюсь благодаря замечательным инструкторам Flatiron.
Но изучение новых технологий или даже идей не обходится без борьбы и ощущения «потерянного в темноте». Мой первый набег на асинхронный JavaScript с использованием выборки — это когда я внезапно почувствовал, что происходит что-то неожиданное, и я не мог понять, почему.
Этот код ниже — из моего первого проекта по созданию угадывателя покемонов:
Моя цель состояла в том, чтобы сгенерировать 5 случайных чисел (pokeNums), а затем получить покемонов с соответствующим значением идентификатора. Я хотел сохранить данные, хранящиеся в объекте, в отдельном массиве (arrayOfPokes), на который можно было бы ссылаться для угадывания. Затем визуализируйте карту покемонов в DOM. Поскольку целью было угадать имя каждого покемона, я хотел, чтобы покемоны отображались на странице в том же порядке, в котором они были сохранены в моем массиве, чтобы можно было проверить догадки таким образом, чтобы Угадайка 1 проверяла первый элемент. массива.
Код успешно создал 5 изображений покемонов! Проверка моего массива также показала, что покемоны были в правильном порядке. Но я увидел проблему с элементами DOM:
Я устанавливал текстовое содержимое, используя индекс, передаваемый в моем forEach, так почему мой первый элемент говорит, что на самом деле передается 5-е число? Это поставило меня в тупик, и после множества поисков в Google я понял, что, поскольку выборка работает асинхронно, каждая выборка на самом деле происходит в одно и то же время, а не один за другим. Поскольку у меня не было никакого кода после моей выборки, forEach начинает первую выборку с первого числа, затем сразу же делает второе, затем третье и т. д. Это означает, что порядок, в котором мой код отображается в dom, теперь зависит от скорости запрос на выборку, а не порядок написания моего кода. Вызывает проблемы, подобные описанным выше, когда извлекаемое пятое число каким-то образом побеждает в гонке и отображается первым.
Мое решение? Хотя я уверен, что есть множество способов решить эту проблему, которые позволяют загружать изображения по порядку при начальной загрузке. Вместо этого я решил добавить кнопку для запуска игры. Это позволило мне сделать несколько разных вещей: я мог добавить несколько текстовых инструкций для игры, сделать целевую страницу меньшего размера/чище, а затем я мог запустить игру нажатием кнопки, после чего запустился бы весь код для игры. .
Новый код добавляет к объекту новое значение, но удаляет все построение карты, так что теперь порядок элементов в массиве объектов будет использоваться позже, поэтому тот факт, что fetch будет возвращать их в другом порядке, не имеет значения. т вызвать проблемы.
Теперь одним нажатием кнопки, благодаря тому, что моя выборка уже была запущена, возвращается новый массив объектов. Мой код может ссылаться на массив и создавать мои карты и добавлять их в правильном порядке, соответствующем порядку моего массива!
Мое решение использовать выборку с forEach состояло в том, чтобы разбить код на отдельные части. На странице загрузите выборку, и произойдет только выборка. Затем, как только кнопка на моей странице нажата, запускается код для создания моих карточек. В то время как эта проблема заставила меня несколько часов, как мне казалось, спотыкаться в темноте, неоднократно пытаясь и терпя неудачу, работая над достижением того, что я хотел, приходя к решению, которое работало так, как я себе представлял, это заставило меня почувствовать, что я могу завоевать мир! Это побудило меня продолжить работу над своим кодом и изо всех сил стараться реализовать все функции, которые я себе представлял.
Так что не сдавайся! Чем дольше и усерднее вы работаете над решением проблемы, тем больше ощущается достижение этой цели. Я знаю, что нахожусь только на первых нескольких шагах долгого и трудного пути кодирования и изучения знаний в области кодирования, и знание того, что в будущем будут более сложные и еще более полезные задачи, воодушевляет меня продолжать учиться и продолжать водить себя для выполнения каждой задачи, поставленной передо мной, и для достижения целей, о которых я всегда мечтал. Код на всех!
