副作用を導入せずに複数のAjaxリクエスタを防ぐ方法

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が失敗した場合にも）。また、コールバックの代わりにプロミスを使用すると、少し見栄えが良くなります（特に、すべてのシナリオを$.getで処理する必要があります）。