javascript - Js中阻止函数多次运行的最佳方法是什么

Question

var emps;

function GetEmps(){
    const Http = new XMLHttpRequest();
    const url='http://127.0.0.1:3001/GetEmployeeList';
    Http.open("GET", url);
    Http.send();
    Http.onreadystatechange = (e) => {
        e.preventDefault();
        if(Http.responseText.length>0)
        {
            emps=JSON.parse(Http.responseText);
            
            for(let i=0;i<emps.length;i++)
            { 
                CreateElementsInPage(i);    
            }
                   
        }
    }

}
function CreateElementsInPage(id) {
    
    console.log(id);
    var btn = document.createElement("BUTTON");
    btn.innerHTML = emps[id].name;
    document.body.appendChild(btn);

    var newLine=document.createElement("br");
    document.body.appendChild(newLine);
}


GetEmps();

我正在尝试动态创建按钮。对于 emps 数组中的每个项目，我希望在 DOM 中出现一个按钮，但是“CreateElementsInPage”函数被调用 4 次而不是 2 次(假设我在 emps 中有 2 个项目)，并且我得到 4 个按钮

Answer 1

您应该在回调中检查请求状态:

Http.onreadystatechange = (e) => {
  if(Http.readyState === XMLHttpRequest.DONE ) {
      // Request is complete, do your logic
  }
}