Question

在JS组件中，我有几种方法可以响应，例如，单击事件，然后触发ajax请求。为了防止相同的ajax请求在第一个结束之前触发多次（如果多次单击同一按钮），我通常设置一个标志。因此，我在组件中有一个名为<%= text_field_tag(:q %>的变量（最初是working）。单击某些内容后，将其设置为false，而完成ajax请求后，将其设置回true。如果false我阻止了任何ajax请求。

问题是，如果working === true，则该组件中的所有操作均被阻止，因此不能同时单击两件事。因此，用户直到完成“喜欢”点击后，才能点击“保存”。

在代码示例中，working === true将被阻止，直到respondToClickB被解决为止。

如何更好地解决这个问题？

提前谢谢！

respondToClickA

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');
                    });
            }
        }
    }
}

每种方法在等待ajax时阻止动作的最佳实践？

1 个答案: