javascript - addeventlistener 正在解析以前的数据

Question

下面的代码是我使用jquery evenlistener，但事件监听器工作缓慢，以前存储的来自var jsonref的数据有时会显示在html表上。我该如何解决这个问题。或者有没有像多线程这样的替代方法，所以总即使快速调用单击事件，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>

标签： javascriptjsonajaxmultithreadingflask