Создайте функцию,которая принимает в себя 1 параметр ids, являющийся массивом параметров id у объекта photo

@Nas589 · Регистрация: 30.07.2021

Студворк — интернет-сервис помощи студентам

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

Создайте функцию getFastestLoadedPhoto, которая принимает в себя 1 параметр ids, являющийся массивом параметров id у объекта photo. Чтобы получить информацию о фото, вам необходимо использовать следующий url https://jsonplaceholder.typico... (1 - это id фотографии). С помощью массива ids получите данные о фотографии, которая быстрее всего загрузилась при fetch запросе. Для решения поставленной задачи используйте Promise.race.

Для удобства необходимо добавить элемент span с текстом “Загрузка...” перед загрузкой фотографии, и спрятать этот элемент после загрузки данных.

Для создания HTML-элемента фотографии используйте данный шаблон:

HTML5
1
2
3
4
5
6
7
8
9
<li class="photo-item">
    <img
        class="photo-item__image"
        src="https://via.placeholder.com/600/92c952"
    />
    <h3 class="photo-item__title">
        accusamus beatae ad facilis cum similique qui sunt
    </h3>
</li>

В src у img должно быть подставлено значение свойства url у фотографии, а в тег h3 - значение свойства title. Добавляйте конечную фотографию в элемент с id равным “data-container”.

Для теста функции getFastestLoadedPhoto используйте данный код:

JavaScript
1
getFastestLoadedPhoto([60, 12, 55])

Примечание: обязательно не забывайте прописывать блоки catch. В них просто выводите ошибку в консоль при помощи console.error.

@amr-now · 28.08.2021, 19:31

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <style>
        #data-container {
            margin-left: 0;
            /* Отступ слева в браузере IE и Opera */
            padding-left: 0;
            /* Отступ слева в браузере Firefox, Safari, Chrome */
        }
 
        li.photo-item {
            list-style-type: none;
            /* Убираем маркеры */
        }
    </style>
</head>
<body>
    <button type="button" id="btn">Загрузить</button><br>
    <ul id="data-container"></ul>
    <script>
        /**
         * Случайное целое число от min до max включительно
         */
        const rand = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);
        /**
         * Задержка на определенное количество миллисекунд.
         * @param {number} ms Количество миллисекунд задержки
         */
        const delay = ms => new Promise(resolve => setTimeout(() => resolve(), ms));
 
        /**
         * TAP-версия загрузки JSON по HTTP
         * @param {RequestInfo} url Строка URL или объект Request
         * @param {RequestInit | undefined} init Объект с опциями к запросу
         * @returns {Promise<any>} Обещание вернуть JSON-объект
         */
        async function fetchJSONAsync(url, init) {
            let response = await fetch(url, init);
            if (response.ok) {
                let json = await response.json();
                return json;
            }
            else
                throw new Error(`${response.status}: ${response.statusText}`);
        }
 
        async function getFastestLoadedPhoto(ids) {
            // await delay(2000); // Безусловная начальная задержка, если нужно
            let tasks = ids.map(async id => {
                await delay(rand(0, 1000)); // Случайная задержка, чтобы картинки приходил хаотично
                return fetchJSONAsync("https://jsonplaceholder.typicode.com/photos/" + id);
            });
            let obj = await Promise.race(tasks);
            console.log(obj);
            container.insertAdjacentHTML("beforeend", `
<li class="photo-item">
    <img
        class="photo-item__image"
        src="${obj.url}"
    />
    <h3 class="photo-item__title">
        ${obj.title}
    </h3>
</li>`);
        }
 
        document.getElementById("btn").onclick = btn_click;
        let span;
        let container = document.getElementById("data-container");
 
        // Асинхронная функция, являющаяся например обработчиком кнопки
        // или при событии загрузки страницы
        async function btn_click() {
            this.disabled = true; // Блокировать кнопку
            container.innerHTML = ""; // Если нужно, удалить прежнее содержимое контейнера
            if (span)
                span.style.display = "";
            else {
                span = document.createElement("span");
                span.innerText = "Загрузка...";
                this.nextElementSibling.after(span);
            }
            try {
                await getFastestLoadedPhoto([60, 12, 55]);
                console.log("Картинка загружена");
            } catch (error) {
                console.error(error.message);
            }
            finally {
                span.style.display = "none"; // Скрыть надпись "Загрузка..."
                this.disabled = false; // Разблокировать кнопку
            }
        }
    </script>
</body>
</html>

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ