Javascript Functions are not executing properly for impatient users

First of all I'm sorry for being so generic in my question...I don't know how to go about asking this in specifics with out uploading a ton of code..

PROBLEM:

We do a lot of lazy loading of JavaScript.

NORMAL USE CASE:

1. User comes to site.
2. User clicks on button.
3. Button calls server to bring down a layer that contains more JavaScript (JavaScript file + some inline JavaScript code)
4. callback is called so that JavaScript is put into the DOM and executed. Layer pop opens with content in it.

Use Case above: the impatient angry user grrrr

1. User comes to site.
2. User clicks on button repeatedly.
   • JavaScript on initial load has not fully finished processing...
   • some functions generate err开发者_如何学Pythonors ...
     • null is null
     • function is undefined
     • XYZ is null
     • Cannot call method 'get' of null (YUI 3.3 use of get)
3. page breaks or errors are generated and sent to the server.

Use Case above: the semi impatient user

1. User comes to site.
2. JavaScript on initial load is fully processed
3. User clicks on button again and again.
4. Button calls server to bring down a layer that contains more JavaScript (JavaScript file + some inline JavaScript code)
5. callback is called so that JavaScript is put into the DOM and executed.
   • JavaScript is loading and breaks during execution for some reason..
   • some functions generate errors ...
     • null is null
     • function is undefined
     • XYZ is null
     • Cannot call method 'get' of null (YUI 3.3 use of get)
6. page breaks or errors are generated and sent to the server.

so the question comes, how can i stop the site breaking for the impatient user... I've been avoiding try/catches but should I?

I'm using YUI 3.3, with dispatcher Plugin if that helps

---

Only process the click once, you could either mark the button in such a way so that a subsequent call to the click handler can determine that loading has already started, and/or keep track of the XMLHttpRequest object that fired the query and call abort on it, then fire a new query.

To throttle the click processing, there are a number of solutions. Not knowing the form of your javascript, I would estimate the easiest-to-implement method to be using element storage:

function clickHandler(element) {
 // make sure this is not already loading
 if (element.retrieve('_waiting_to_load') === true)
   return;
 element.store('_waiting_to_load', true);

 /* do ajax calls */
}

function ajaxCallback(response) {

  /* do whatever needs to be done with the response */

  // set _waiting_to_load to false
  element.store('_waiting_to_load', false);
}

To abort/restart the load:

function clickHandler(element) {

 // if the loading is pending, start it over
 if (element.retrieve('_pending_query')) {
   element.retrieve('_pending_query').abort();
 }

 // don't know what you're using for this... substitute the real thing
 var query = new ajaxQueryObject;
 element.store('_pending_query', query );

}

function ajaxCallback(response) {

  /* do whatever needs to be done with the response */

  element.store('_pending_query', false);
}