Как отменить запросы в полете, если поступает новый запрос?

Question

Я использую Go для создания API и обслуживания одностраничного веб-сайта со ссылками на боковой панели, которые при нажатии обновляют основную область содержимого в центре экрана. Поток:

1. Ссылка нажата
2. содержимое div очищено
3. ajax вызов конечной точки API в зависимости от того, какая ссылка была нажата
4. добавить разметку, содержащую шаблон jquery к содержимому div
5. применить полученные данные к шаблону

Это работает нормально, пока пользователь ожидает загрузки контента, что миллисекунды, но в будущем могут появиться запросы, которые займут больше времени. Если пользователь может очень быстро щелкнуть по нескольким ссылкам, которые загружают разное содержимое, так что несколько запросов ajax выполняются, то генерируемый контент не определяется c, поскольку jquery очищает и добавляет разметку из несколько запросов. Вы увидите смесь контента по результатам обоих запросов.

Я хочу обрабатывать только последний поступивший запрос. Если пользователь щелкает ссылку один, а затем нажимает ссылку два, пока запрос один еще находится в полете, запрос один следует отменить, и обрабатывать только два запроса.

Я думаю, что это должно быть обработано на сервере, но не знаю, с чего начать. Правильный ли следующий подход?

Создать канал запроса для постановки входящих запросов в контекст. После постановки в очередь проверьте длину канала и, если у него есть несколько запросов, разместите диапазон по каналу и вызовите функцию отмены контекста каждого запроса, за исключением последнего, поставленного в очередь.

Кроме того, в настоящий момент обработчики являются глобальными, поэтому я Также подумать, что необходимо согласовать идентификатор с клиентом или попросить клиента сгенерировать идентификатор, чтобы сервер знал, какой клиент запрашивает отмену.

Answer 1

Согласно комментариям, это будет обработано в клиенте примерно так:

 var currentRequest = null;    

currentRequest = jQuery.ajax({
    type: 'POST',
    data: 'value=' + text,
    url: 'AJAX_URL',
    beforeSend : function()    {           
        if(currentRequest != null) {
            currentRequest.abort();
        }
    },
    success: function(data) {
        // Success
    },
    error:function(e){
      // Error
    }
});