XMLHttpRequest too many clicks - script crashes (JavaScript)

Question

I have a problem with the following JavaScript function:

function blablabla(str) {
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp_move = new XMLHttpRequest();
  } else {
    // code for IE6, IE5
   xmlhttp_move = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp_move.onreadystatechange = function() {
    if (xmlhttp_move.readyState == 4 && xmlhttp_move.status == 200) {
      document.getElementById("inventory").innerHTML = xmlhttp_move.responseText;
    }
  }
  xmlhttp_move.open("GET","/m/inventory.php?id="+str,true);
  xmlhttp_move.send(); 
}

When user clicks too many times non-stop, without waiting reload at some point he sees website crash (i mean styling changes.. as I guess function returns empty result into DIV) which is the smart way to fix this problem? I've read some articles about using open(.., false) but i'd like to keep asynchronized function.

Can you disable the button (or whatever is being clicked) until it has completed? — NightOwlPrgmr, Jul 20 '15 at 13:13
yes adding to @NightOwlPrgmr point, you can enable the button back in your `success` or `error` callback in your `$.ajax`. One more thing, why would you want to use vanilla js when you can use jquery itself ? jquery ajax syntax is simple & easy to use. — dreamweiver, Jul 20 '15 at 13:19
NightOwlPrgmr - I'd like to keep buttons as Is,.. otherwise I can just use False in open() function. — Alex116, Jul 20 '15 at 13:23
Additionally, if you know how to solve your issue, why even post the question? — NightOwlPrgmr, Jul 20 '15 at 13:25
NightOwlPrgmr if you have nothing else to add - Thanks. ps. read the question - " but i'd like to keep asynchronized function.". — Alex116, Jul 20 '15 at 13:27
Off topic, but do you *really* still need that code to support IE5/6? — Simba, Jul 20 '15 at 13:28
@Alex116 If your asynchronized function is crashing your site than why would you allow it to run multiple times? I DID read your post which is why I provided a comment on what you can do to prevent the crash. I was just trying to understand your intentions (not working). Anyway, you could try `xmlhttp_move.send(null);`. — NightOwlPrgmr, Jul 20 '15 at 13:53

score 3 · Answer 1 · edited May 23 '17 at 12:06

I would be inclined to "debounce" your blablabla function.

Debouncing is a technique to prevent a function being called multiple times in quick succession. "This function may be called no more than once per second", for example. The time threshold is up to you.

Here's a simple debounce function, written in plain JavaScript (no library dependencies):

function debounce(fn, threshold) {
    threshold = threshold || 300;
    var timer;
    return function() {
        if (!timer) {
            fn.apply(this, arguments);
        }
        clearTimeout(timer);
        timer = setTimeout(function() {
            timer = null;
        }, threshold);
    };
};

Usage (threshold set at 1 second):

debounce(blablabla, 1000);

Example:

var el = document.getElementById('myid');
el.addEventListener('click', debounce(blablabla, 1000));

Further reading:

But what happens to the multiple ajax calls generated by multiple clicks, if each of those calls dont return back within one sec ? it will create necessary ajax calls — dreamweiver, Jul 20 '15 at 13:26
Yes, indeed, it wasn't clear in your original question that users would click a specific ` — kieranpotts, Jul 20 '15 at 19:16

XMLHttpRequest too many clicks - script crashes (JavaScript)

1 Answers1