JavaScript: Приведение последовательного порядка для принудительного выполнения кода ПОСЛЕ события

Question

Сначала я создаю пустой объект, который должен обновляться определенным массивом при каждом нажатии кнопки.

Вы можете увидеть это на Шаге 1 и Шаге 2 .

---

Обратите внимание, что здесь я использовал пример кода. Он не предназначен для работы

Шаг 1: Создание объекта

var obj = {};

Шаг 2: Создание кнопки

Btn.addEventListener('click', () => {
    const a = [..];
    const b = [..];
    const c = [..];}

    obj['a']  = a;
    obj['b'] = b;
    obj['c']  = c;
);

Шаг 3: Выполнение Sth с ОБНОВЛЕННЫМ объектом

console.log(obj)

Проблема

Я использовал console. log () в качестве примера, конечно, я хочу сделать что-то еще с кодом.

Однако console.log () выполняется до EventListener. Я понимаю, почему это так, но как я могу изменить это поведение?

У меня есть что-то вроде Promise-Technique с .then () в моей голове.

Обратите внимание, что я не хочу делать это в рамках функции * addEventListener () **, но вне ее!

Answer 1

Прежде всего, ясно, что вы не можете поместить свой код обработки на верхний уровень вашего скрипта, поскольку он выполняется немедленно (и только один раз).

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

var obj = {};

btn.addEventListener('click', () => {
    obj.time = new Date;
    process();
);

function process() {
    console.log(obj);
}

Вы упомянули использование обещаний и then. Но then также требует функции (в качестве аргумента). Но поскольку у вас уже есть функция обратного вызова (обработчик кликов), это не дает большого преимущества.

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