如何實時計算在 Javascipt function 中成功執行了多少？

Question

我想實時統計所有用戶在訪問我的網站時可以看到的 javascript 的總 function。 例如，現在有 3 位訪問者我想總計有多少成功的 Javascript 執行了他們執行的操作，當頁面刷新時計數不會重置，並且所有訪問的用戶都可以看到。

html：

<div class="row">
<div class="col">
<div class="card-profile-stats d-flex justify-content-center mt-md-5">
<div>
<span class="heading" id="count1">0</span>
<span class="badge badge-success">Count 1</span>
</div>
<div>
<span class="heading" id="count2">0</span>
<span class="badge badge-danger">Count 2</span>
</div>
<div>
<span class="heading" id="count3">0</span>
<span class="badge badge-info">Count 3</span>
</div>
<div>
<span class="heading" id="all">0</span>
<span class="badge badge-info">Total</span>
</div>
</div>
</div>
</div>

js：

function startfunc() {
    var xs = 0;
    var cb = 0;
    var fp = 0;
    $.ajax({
    url: 'urlhere.php',
    type: 'GET',
    async: true,
    success: //some of my code here
                    
    var total = parseInt(xs) + parseInt(cb) + parseInt(fp);
    $('#count1').html(xs);
    $('#count2').html(cb);
    $('#count3').html(fp);
    $('#all').html(total);

Answer 1

假設您有一個存儲值的數據庫（這將是存儲總值的唯一方法），那么您將創建一個間隔計時器，該計時器將執行 http 請求以獲取頻率不太頻繁的結果。

我給出的例子是純 JavaScript，所以它應該可以工作。 為此，您不需要 jQuery。

Promise 方法：

文件： script.js

// Code to execute when window loaded
window.addEventListener('load', () => {

   // Main function to retrieve results
   const getResults = () => {
      fetch('/url/to/getResults.php')
         .then(response => {
             const json = response.json();
             if (response.ok) {
                return json;
             }
             return json.then(data => Promise.reject(data));
         })
         .then(jsonData => {
             const total = parseInt(jsonData.xs) + parseInt(jsonData.cb) + parseInt(jsonData.fp);
             document.querySelector('#count1').innerHTML = jsonData.xs;
             document.querySelector('#count2').innerHTML = jsonData.cb;
             document.querySelector('#count3').innerHTML = jsonData.fp;
             document.querySelector('#total').innerHTML = total;
         })
         .catch(error => {
             console.log('ERROR', error);
         });
   };

   // Get an update results every 60 seconds
   const interval = setInterval(getResults, 60000);
});

異步/等待方法：

window.addEventListener('load', () => {

   // Main function to retrieve results
   const getResults = async () => {
      try {
         const response = await fetch('/url/to/getResults.php');
         const responseJSON = await response.json();
         const total = parseInt(jsonData.xs) + parseInt(jsonData.cb) + parseInt(jsonData.fp);
         document.querySelector('#count1').innerHTML = jsonData.xs;
         document.querySelector('#count2').innerHTML = jsonData.cb;
         document.querySelector('#count3').innerHTML = jsonData.fp;
         document.querySelector('#total').innerHTML = total;
      } catch (error) {
         console.log('ERROR', error);
      }
   };

   // Get an update results every 60 seconds
   const interval = setInterval(await getResults, 60000);
});