Javascript addeventlistener正在分析以前的数据

下面的代码是我使用的jquery evenlistener，但是事件监听器工作缓慢，以前从var jsonref存储的数据有时会显示在html表上。我如何解决这个问题。或者有没有其他方法，比如多线程，因此，即使快速调用click事件，jquery事件监听器的总执行时间在获取数据时也会更快

<script>
var counter = 1;
   let btnAdd = document.querySelector('#add');
btnAdd.addEventListener('click', () => {
  var inp = document.getElementById('qty').value;
  if (inp  === ''){
    alert("Enter a valid quantity");
  }
  else{
    let table = document.querySelector('table');
  
  var cust_type = document.getElementById('Avail').innerHTML.replace('Avail:','')
  console.log(cust_type)
var mylist = document.getElementById('select');
 var name  = mylist.options[mylist.selectedIndex].text;
 
 var custinfo = {
   Productname:name,
   Customertype:cust_type
 }
 
 
 var req = new XMLHttpRequest();
var url = "/login/product";
req.open("POST", url, true);
req.setRequestHeader("Content-type", "application/json");
req.send(JSON.stringify(custinfo));
fetch('/login/product')
   .then(function (response) {
       return response.text();
   }).then(function (text) {
       console.log('GET response text:');
       console.log(text); // Print the greeting as text
   });

// Send the same request
fetch('/login/product')
   .then(function (response) {
       return response.json(); // But parse it as JSON this time
   })
   .then(function (json) {
       console.log('GET response as JSON:');
       console.log(json); // Here’s our JSON object
       json = JSON.stringify(json);
        var jsonref = JSON.parse(json)
        var  jsonre = parseInt(jsonref.Price);
      console.log(jsonre)
//New project
$.ajax({
       type: "GET",
       url: "login/product",
       //dataType: 'json',
       success: function(data) {
           console.log("This is the returned data: " + JSON.stringify(data));
       },
       error: function(error){
           console.log("Here is the error res: " + JSON.stringify(error));
       }
   });  

   let template = `
               <tr>
                   <td>${counter}</td>
                   <td>${name}</td>
                   <td>${inp}</td>
                   <td>${jsonre*inp}</td>
               </tr>`;

   table.innerHTML += template;

   counter = counter + 1;
   console.log(inp);})
  }
   
   
});
</script>

var计数器=1；
让btnAdd=document.querySelector（'#add'）；
btnAdd.addEventListener（'单击'，（）=>{
var inp=document.getElementById（'qty'）.value；
如果（inp==''）{
警报（“输入有效数量”）；
}
否则{
let table=document.querySelector（'table'）；
var cust_type=document.getElementById（'Avail'）.innerHTML.replace（'Avail:'，''）
console.log（客户类型）
var mylist=document.getElementById（'select'）；
var name=mylist.options[mylist.selectedIndex].text；
var custinfo={
Productname:name，
客户类型：客户类型
}
var req=新的XMLHttpRequest（）；
var url=“/login/product”；
请求打开（“POST”，url，true）；
setRequestHeader（“内容类型”、“应用程序/json”）；
请求发送（JSON.stringify（custinfo））；
获取（'/login/product'）
.然后（功能（响应）{
返回response.text（）；
}).然后（函数（文本）{
log（'GET response text:'）；
console.log（text）；//将问候语打印为文本
});
//发送相同的请求
获取（'/login/product'）
.然后（功能（响应）{
return response.json（）；//但这次将其解析为json
})
.then（函数（json）{
log（'GET response as JSON:'）；
console.log（json）；//这是我们的json对象
json=json.stringify（json）；
var jsonref=JSON.parse（JSON）
var jsonre=parseInt（jsonref.Price）；
console.log（jsonre）
//新项目
$.ajax({
键入：“获取”，
url:“登录/产品”，
//数据类型：“json”，
成功：功能（数据）{
log（“这是返回的数据：+JSON.stringify（数据））；
},
错误：函数（错误）{
log（“这是错误res:+JSON.stringify（error））；
}
});  
让模板=`
${counter}
${name}
${inp}
${jsonre*inp}
`;
table.innerHTML+=模板；
计数器=计数器+1；
console.log（inp）；}）
}
});