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功能。

Debouncing是一种防止函数快速连续多次调用的技术。例如，“此功能可以每秒调用不超过一次”。时间阈值取决于您。

这是一个简单的去抖函数，用纯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));

进一步阅读：

XMLHttpRequest点击次数过多 - 脚本崩溃（JavaScript）

1 个答案: