Question

以下是在Ajax操作期间阻止多个请求的常用解决方案。

let isRequesting = false

$('#fetch').on('click', () => {
    if(isRequesting) {
        console.log('ajax still in progress, please wait')
        return false
    }

    isRequesting = true

    $.get(SOME_RESOURCE, (data) => {
        console.log('success with :', data)
        isRequesting = false
    })
})

但是如何在不改变我的应用中的任何状态的情况下完成这项工作，就像功能程序一样。

Answer 1

如果不保持状态，你就无法做到，但你可以通过将状态封装在通用组件中来使其更漂亮。例如：

(function($){
    $.fn.extend({
        smartOn: (type, funcHandler) => {
            return this.each(function() {
                let $me = $(this);
                let isRequesting = false;
                $me.on(type, () => {
                    if (isRequesting) {
                        console.log('ajax still in progress, please wait');
                        return false;
                    }

                    isRequesting = true

                    funcHandler(() => {
                        isRequesting = false;
                    });
                });
            });
        }
    });
})(jQuery);

然后像这样称呼它：

$('#fetch').smartOn("click", (callbackDone) => {
    $.get(SOME_RESOURCE, (data) => {
        console.log('success with :', data)
        callbackDone();
    })
});

请记住在每个场景中调用callbackDone（）（即如果$.get失败也是如此）。此外，如果您使用Promises而不是回调，它可能会使它看起来更好看（特别是需要使用$.get来处理每个场景。）

如何防止多个Ajax requets而不引入副作用

1 个答案: