Лучшая практика для блокировки действий во время ожидания ajax, для метода?

Question

В компоненте JS у меня есть несколько методов, которые отвечают, например, на события click, а затем запускают запросы ajax.Чтобы предотвратить запуск одного и того же ajax-запроса несколько раз перед завершением первого (в случае нескольких нажатий на одну и ту же кнопку), я обычно устанавливаю флаг.Поэтому в моем компоненте есть переменная с именем working (которая изначально равна false).Когда что-то щелкнуло, я установил его на true, а когда запрос ajax был выполнен, я установил его обратно на false.Если working === true Я блокирую любые запросы AJAX.

Проблема в том, что если working === true, ВСЕ действия блокируются в компоненте, поэтому нельзя одновременно нажимать на две вещи.Таким образом, пользователь не может щелкнуть «сохранить», пока его «как» щелкнуть прямо перед тем, как будет сделано.

В примере кода, respondToClickB будет заблокирован, пока не будет разрешен respondToClickA.

Как мне лучше справиться с этой проблемой?

Заранее спасибо!

export default {
    data: function() {
        return {
            working: false
        }
    },
    methods: {
        respondToClickA: function() {
            let self = this;
            if(!self.working)
            {
                self.working = true;
                axios.get('/ajax')
                    .then(function(response){
                        self.working = false;
                    });
            }
        },
        respondToClickB: function() {
            let self = this;
            if(!self.working)
            {
                self.working = true;
                axios.get('/ajax')
                    .then(function(response){
                        self.working = false;
                    });
            }
        }
    }
}

Answer 1

Хороший вариант использования для Set: сделать self.working объектом Set и добавить / удалить значения для него.

Set похоже на массив, но не имеет порядка.

export default {
    data: function() {
        return {
            working: new Set()
        }
    },
    methods: {
        respondToClickA: function() {
            let self = this;
            if(!self.working.has('a'))
            {
                self.working.add('a')
                axios.get('/ajax')
                    .then(function(response){
                        self.working.delete('a');
                    });
            }
        },
        respondToClickB: function() {
            let self = this;
            if(!self.working.has('b'))
            {
                self.working.add('b');
                axios.get('/ajax')
                    .then(function(response){
                        self.working.delete('b');
                    });
            }
        }
    }
}