Функции обратного вызова 📞 : здесь на помощь

Как начинающий разработчик, одной из самых запутанных функций, в которых мне пришлось разбираться, были функции обратного вызова.

Серьезно, запутанные. Итак, давайте разберем их на простом английском языке.


ОПРЕДЕЛЕНИЕ

Согласно G.O.A.T., MDN, функции обратного вызова — это:

«Функция, передаваемая в другую функцию в качестве аргумента, которая затем вызывается внутри внешней функции для завершения какого-либо действия».

А?

Давайте рассмотрим пример.

ПРИМЕР В ДЕЙСТВИИ

По мере усложнения наших лабораторных работ я вызывал функции обратного вызова, даже не подозревая об этом. Честно говоря, на мой взгляд, это лучший способ их изучения. Давайте взглянем на лабораторную работу и посмотрим, что здесь происходит.

Во-первых, все мои функции вызываются как обещание в моем .then с моими данными JSON.

Первая функция, firstMovie, вызывает массив данных фильмов (movieData), который должен быть помещен на мой сайт в виде объекта. Все переменные определены, вызывается слушатель событий для отдельной кнопки (нам не нужно об этом беспокоиться).

Вторая функция, createImage, указывает movieData отобразить изображение, связанное с каждым фильмом, а затем отобразить его в виде навигационной панели.

Но вот снова firstMovie! Что с ним?

createImage не делает ничего интересного сам по себе, без помощи firstMovie — он просто выводит изображение. Мы можем использовать возможности предыдущей функции, firstMovie, чтобы помочь ей сделать больше!

Вызвав firstMovie внутри createImage, мы можем создать слушателя событий, который скажет этому новому изображению, созданному через createImage, опираться на мощь firstMovie в отображении подробностей всех фильмов. Это происходит по щелчку мыши, активируя именно то, что делает firstMovie — перебирает все данные JSON для фильмов и отображает их вместе с соответствующим навигационным изображением!

fetch("http://localhost:3000/movies") 
.then(res => res.json()) 
.then(movieData => {
    firstMovie(movieData[0]);
    createImage(movieData);
})

function firstMovie(movieData) {
    title.textContent = movieData.title
    description.textContent = movieData.description
    year.textContent = movieData.release_year
    pic.src = movieData.image
    watchedBtn.addEventListener('click', (e) => {
        movieData.watched = !movieData.watched;
        watchedBtn.textContent = movieData.watched ? "Watched" : "Unwatched";
    });
    }

function createImage(movieData){
    movieData.forEach((movie) => {
        let img = document.createElement("img");
        img.src = movie.image
        insertImage.append(img)
        img.addEventListener('click', (e) => {
            firstMovie(movie)
    });
})
}

Вход в полноэкранный режим Выход из полноэкранного режима

ВЫ ПОЛУЧИЛИ ЭТО.

Все еще путаетесь в функциях обратного вызова? Пожалуйста, насладитесь этим невероятным видео на YouTube от bersling, в котором есть самые восхитительные персонифицированные функции, благодаря которым вы быстро поймете функции обратного вызова (и захотите есть хлеб).

*Источники изображений: Сделано мной!
*

Оцените статью
devanswers.ru
Добавить комментарий