XMLHttpRequest点击太多-脚本崩溃(JavaScript)

Question

我在使用以下JavaScript函数时遇到问题：

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(); 
}

当用户不间断地点击太多次，而没有等待重新加载时，他会看到网站崩溃(我的意思是样式改变..因为我猜函数返回空结果到DIV中)，这是解决这个问题的聪明方法吗？我读过一些关于使用open(..，false)的文章，但我想保留异步函数。

Answer 1

我倾向于“揭穿”你的blablabla函数。

反弹跳是一种防止函数被快速连续多次调用的技术。例如，“此函数每秒只能调用一次”。时间门槛由你决定。

下面是一个简单的去抖动函数，用纯JavaScript编写(不依赖于库)：

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);
    };
};

使用(阈值设置为1秒)：

debounce(blablabla, 1000);

示例：

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

进一步阅读：

• http://davidwalsh.name/function-debounce
• Can someone explain the "debounce" function in Javascript