Как предотвратить многочисленные запросы 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 не удается). Кроме того, если вы используете Promises вместо обратных вызовов, это может сделать его немного приятным (особенно необходимость обрабатывать каждый сценарий с помощью $.get).