multiple launch ajax request

Question

There is a page for which data is taken by calling ajax when loading it.

<script> $(document).ready(function () { getItems(adminPageSize, null, false, false); }); function getItems(pageSize, firstKey, isReverse, includePreviousKey) { var userName = getSessionEmail(); var sessionID = getSessionID(); var requestData = createRequest(userName, sessionID, adminPageSize, firstKey, isReverse, includePreviousKey); $.ajax({ url: baseurl + '/admins/list', type: 'POST', data: JSON.stringify(requestData), contentType: "application/json", asynk: false, success: function (data) { var status = data.status; var message = data.errorMessage; if (status == "SUCCESS") { if (isReverse) data.data.reverse(); writeBody(data); } else if (status == "ERROR") { if (validateAuthError(message)) return; showInfo(message, "Error"); } }, error: function (xhr, ajaxOptions, thrownError) { ajaxErrorProcessing(xhr.status); showInfo("unexpected error occurred by accessing to " + hostUrl); } }); } </script>

Go to the page by the link:

 <a id="btnAdministra" href="Administrators.html">Administrators</a>

When multiple clicking on the above link occurs several simultaneous requests and the page falls. How can I make the page load only once no matter how many times it is clicked?

I’ll clarify: you have several ajax requests when you click a link convulsively, do you need to do only one?
variable flag, clicked, clicked, changed to false, and no longer send Ajax request.
the flag variable is not suitable because the request is executed when the page is loaded.
the variable will be a field window, like a global page object.
When clicking on the specified link, does a normal transition to the page occur or does ajax-loading of content work?
after the first click there is a complete redrawing of the page.
since the page is already formed (a div block with links), you can click on the link.

Accepted Answer · 2016-08-02T07:10:07

After finding out all the details of the situation, it turned out that the standard methods are not suitable here.

In addition to the answers "take the server better" or "optimize the code, why it falls from two requests", you can think of only this crutch: when you click on the link, set the "flag" in localStorage, independent of the current page.

 $("#btnAdministra").on('click', function(e){ var delay = 10; //для подстраховки: сколько секунд выждать перед повторным запросом var contentLoading = localStorage.getItem('contentLoading'); if(contentLoading && (new Date()) - contentLoading < delay * 1000){ e.preventDefault(); return false; } localStorage.setItem('contentLoading', +(new Date())); });

With the above code, the link will work only after 10 seconds after the next click. Understandably, this will not work. Therefore, in the AJAX request podbload of the page, you need to add a code that will remove the flag:

 localStorage.removeItem('contentLoading')

maybe the result of the Ajax is inserted into the page by append'ami, a lot of such appendages bring down the page, or a problem in the layout, after several appendages of porridge.
@ Jean-Claude I understand that the link works like a normal link - they clicked, there was a transition to Administrators.html, and there, when loading, I called on ajax.
how can you click on such a link many times after clicking if a transition occurs?
The server has not yet responded to the first request when the next one arrives.

multiple launch ajax request

1 answer 1

More articles: