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

@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.

Новые блоги и статьи Все статьи Все блоги /
Валидация и контроль данных табличной части документа перед записью Maks 22.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .	Отчёт о затраченных материалах за определенный период с макетом печатной формы Maks 21.04.2026 Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .	Отчёт о спецтехнике находящейся в ремонте Maks 20.04.2026 Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .	Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)" Hrethgir 19.04.2026 Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии Maks 19.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .	Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .

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

	Как отследить, что событие выполняется и как отследить что оно завершилось? 05.08.2020, 20:02. Показов 1819. Ответов 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

Опции темы