Как отследить, что событие выполняется и как отследить что оно завершилось?

@AlexKOR5 · Регистрация: 15.02.2019

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

@j2FunOnly · 06.08.2020, 08:48

Сообщение от AlexKOR5

событие выполняется

Я так понимаю, в браузере событие - это атомарная операция. Возможно вы имели ввиду обработчик события?

@AlexKOR5 · 06.08.2020, 09:27 **[ТС]**

Я имел ввиду обработчик события.

@Peskova_Sveta · 06.08.2020, 16:25

Пропишите какой-нибудь вывод в консоль, например в начале, середине и конце функции - обработчика

@AlexKOR5 · 06.08.2020, 17:39 **[ТС]**

Пропишите какой-нибудь вывод в консоль, например в начале, середине и конце функции - обработчика

Смотрите с началом и серединой выполнения события ваш вариант подойдет, но как отследить, что событие только что завершилось, чтобы я мог выполнить какие-то действия сразу после этого. Что-то типа Колбека.

@D_Vik · 06.08.2020, 18:18

Паттерн обсервер применяйте.

Добавлено через 34 минуты
Самый простецкий пример (если все правильно понял) выглядит как нибудь так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function server(customer) {
 
  let timeout = setTimeout( function() {
 
    customer('Data received')
 
    clearTimeout(timeout)
 
  }, 2000)
}
 
function customer(data) {
 
  console.info(data)
}
 
server(customer)

@amr-now · 07.08.2020, 16:24

AlexKOR5, Peskova_Sveta, D_Vik, по справочнику Task Asynchronous Pattern:
https://docs.microsoft.com/ru-... g-progress

Вывести на экран слово из текстового поля с ожиданием каждого символа 100 мс:
index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Progress</title>
    <style>
        div{
            height:20px;
        }
    </style>
</head>
<body>
    <input id="source"> <input type="button" id="btn" value="Start">
    <div id="out"></div>
    <div id="status1"></div>
    <progress id="progress1" max="100" value="0"></progress>
    <script src="scripts/app.js"></script>
</body>
</html>

Исходник на TypeScript:

JavaScript
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
type Action<T> = (v: T) => void;
 
interface IProgress<T> {
    report(value: T): void;
}
/*
 * Task.Delay()
 */
const delay = (ms: number) => new Promise(resolve => { setTimeout(resolve, ms); });
/**
 * Упрощенный вариант издателя события без MulticastDelegate
 */
class Progress<T> implements IProgress<T> {
    private _actions: Action<T>[];
 
    constructor(action?: Action<T>) {
        this._actions = [];
        // Аргумент в данном конструкторе может отсутствовать.
        if (action instanceof Function)
            this._actions.push(action);
    }
    report(value: T) {
        for (let action of this._actions)
            action(value);
    }
    /**
     * Упрощенный вариант добавления обработчиков события без MulticastDelegate
     * @param {Action<T>} action Обработчик события с сигнатурой Action<T>
     */
    progressChanged(action: Action<T>) {
        if (!(action instanceof Function))
            throw new Error("Argument is not a function");
        this._actions.push(action);
    }
}
 
let source: HTMLInputElement = <any>document.getElementById("source"),
    btn: HTMLButtonElement = <any>document.getElementById("btn"),
    progress1: HTMLProgressElement = <any>document.getElementById("progress1"),
    out: HTMLDivElement = <any>document.getElementById("out"),
    status1: HTMLDivElement = <any>document.getElementById("status1");
 
btn.onclick = <any>btn_click;
 
async function btn_click(this: HTMLButtonElement) {
    out.textContent = "";
    status1.textContent = "";
    this.disabled = true;
    try {
        await downloadStringAsync(
            source.value,
            new Progress(s => {
                out.textContent = s;
 
                progress1.value = Math.floor(s.length / source.value.length * 100);
            }));
        // Любые действия после завершения обработчика события
        status1.textContent = "Вывод на экран завершен.";
    }
    catch (error) {
        status1.textContent = "Ошибка вывода на экран.";
    }
    finally {
        this.disabled = false;
    }
}
 
 
async function downloadStringAsync(str: string, progress: IProgress<string>) {
    let s = "";
    for (let e of str) {
        await delay(100);
        s += e;
        progress.report(s);
    }
}

Результат компиляции в JavaScript:

JavaScript
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
/*
 * Task.Delay()
 */
const delay = (ms) => new Promise(resolve => { setTimeout(resolve, ms); });
/**
 * Упрощенный вариант издателя события без MulticastDelegate
 */
class Progress {
    constructor(action) {
        this._actions = [];
        // Аргумент в данном конструкторе может отсутствовать.
        if (action instanceof Function)
            this._actions.push(action);
    }
    report(value) {
        for (let action of this._actions)
            action(value);
    }
    /**
     * Упрощенный вариант добавления обработчиков события без MulticastDelegate
     * @param {Action<T>} action Обработчик события с сигнатурой Action<T>
     */
    progressChanged(action) {
        if (!(action instanceof Function))
            throw new Error("Argument is not a function");
        this._actions.push(action);
    }
}
let source = document.getElementById("source"), btn = document.getElementById("btn"), progress1 = document.getElementById("progress1"), out = document.getElementById("out"), status1 = document.getElementById("status1");
btn.onclick = btn_click;
async function btn_click() {
    out.textContent = "";
    status1.textContent = "";
    this.disabled = true;
    try {
        await downloadStringAsync(source.value, new Progress(s => {
            out.textContent = s;
 
            progress1.value = Math.floor(s.length / source.value.length * 100);
        }));
        // Любые действия после завершения обработчика события
        status1.textContent = "Вывод на экран завершен.";
    }
    catch (error) {
        status1.textContent = "Ошибка вывода на экран.";
    }
    finally {
        this.disabled = false;
    }
}
async function downloadStringAsync(str, progress) {
    let s = "";
    for (let e of str) {
        await delay(100);
        s += e;
        progress.report(s);
    }
}

Тут как раз случай, когда скрипт без исходника на TypeScript не имеет никакой ценности.

@D_Vik · 07.08.2020, 16:32

А в чем смысл дженериков ? Это ж по сути тоже самое что и any.

Новые блоги и статьи Все статьи Все блоги /
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114
Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .	Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .

@AlexKOR5 50 / 14 / 3 Регистрация: 15.02.2019 Сообщений: 514

	Как отследить, что событие выполняется и как отследить что оно завершилось? 05.08.2020, 20:02. Показов 1784. Ответов 7 Метки нет (Все метки) Как отследить, что событие выполняется и как отследить что оно завершилось? 0

@AlexKOR5 50 / 14 / 3 Регистрация: 15.02.2019 Сообщений: 514
	06.08.2020, 09:27 [ТС]
	Я имел ввиду обработчик события. 0

@Peskova_Sveta 409 / 162 / 32 Регистрация: 26.11.2019 Сообщений: 434
	06.08.2020, 16:25
	Пропишите какой-нибудь вывод в консоль, например в начале, середине и конце функции - обработчика 1

@D_Vik 368 / 234 / 68 Регистрация: 19.07.2016 Сообщений: 833
	07.08.2020, 16:32
	А в чем смысл дженериков ? Это ж по сути тоже самое что и any. 1