單擊按鈕后如何自動重新加載 ajax/jQuery 表數據

Question

我創建了一個 jQuery/ajax API 調用 function 來讀取 JSON 數據並將其插入到 HTML 表中，它工作正常，但我想在單擊按鈕時 5 秒后自動重新加載表數據。

我嘗試了一些代碼來讓它工作。 我該如何解決？

$(document).ready(function() {
        $.getJSON("http://mydevtest.in/wp-json/pmprocurrencies/v1/all", function(data){
            var currency_Data = '';
            
            $.each(data, function(key, value){
                currency_Data += '<tr>';
                currency_Data += '<td>' + value.id + '</td>';
                currency_Data += '<td>' + value.country_alpha + '</td>';
                currency_Data += '<td>' + value.currency_code + '</td>';
                currency_Data += '<td>' + value.currency_sign + '</td>';
                currency_Data += '<td>' + value.currency_rate + '</td>';
                currency_Data += '<td><button type="submit" id="delBtn" value="' + value.id + '">x</button></td>';
                currency_Data += '</tr>';
            });
            $("#currency_tables").append(currency_Data);
            // Reload the table data on "#addcr" button click. 
            $("#addcr").on("click", function(){
                $("#currency_tables").load(location.href + " #currency_tables");
            });
            
        });
  
    });

Answer 1

您可以為此使用setTimeout(function,milliseconds) 。 https://developer.mozilla.org/zh-CN/docs/Web/API/setTimeout

Answer 2

所以，我自己找到了解決方案，下面是工作代碼，但我認為重復相同的 function 來獲得結果並不是專業的解決方案。 如果有人有更好的主意，請提出建議。

$(document).ready(function() {
        $.getJSON("http://mydevtest.in/wp-json/pmprocurrencies/v1/all", function(data){
            var currency_Data = '';
            
            $.each(data, function(key, value){
                currency_Data += '<tr>';
                currency_Data += '<td>' + value.id + '</td>';
                currency_Data += '<td>' + value.country_alpha + '</td>';
                currency_Data += '<td>' + value.currency_code + '</td>';
                currency_Data += '<td>' + value.currency_sign + '</td>';
                currency_Data += '<td>' + value.currency_rate + '</td>';
                currency_Data += '<td><button type="submit" id="delBtn" value="' + value.id + '">x</button></td>';
                currency_Data += '</tr>';
            });
            $("#currency_tables").html(currency_Data);
            // Reload the table data on "#addcr" button click. 
            
            
        });

        $("#addcr").on("click", function(){
            setTimeout(function(){
                $.getJSON("http://mydevtest.in/wp-json/pmprocurrencies/v1/all", function(data){
                var currency_Data = '';
                
                $.each(data, function(key, value){
                    currency_Data += '<tr>';
                    currency_Data += '<td>' + value.id + '</td>';
                    currency_Data += '<td>' + value.country_alpha + '</td>';
                    currency_Data += '<td>' + value.currency_code + '</td>';
                    currency_Data += '<td>' + value.currency_sign + '</td>';
                    currency_Data += '<td>' + value.currency_rate + '</td>';
                    currency_Data += '<td><button type="submit" id="delBtn" value="' + value.id + '">x</button></td>';
                    currency_Data += '</tr>';
                });
                $("#currency_tables").replaceWith(currency_Data);
                // Reload the table data on "#addcr" button click. 
            });
            }, 4000)
        });
  
    });