PHP如何稍后设置内容或是否加载？ [关闭]

Hello I have a website which loads data from an api to show the newest stats. I am storing it for 10 minutes to prevent loading api calls every time. Since there are many api calls it takes at first time like 5-10 seconds to finish loading the website which looks like the website would be down.

Currently I am using pure php for functionalities. There are functions like GetTotalEarnings() - just a file_get_contents($url) to receive a json content and decode it and put it to a table which I can use for 10 minutes. After 10 minutes it will call all apis again to refresh the values (if the page get reloaded of course).

To solve this my idea was to load the content first and show the content and then load the data to set values later. But I don't know where to start. I know jquery can do this with a call back but its javascript. I don't know what tot do there

Two examples how looks currently

<h1 class=""><center>Earnings Total: <?php echo GetTotalEarnings() . " (Latest update: " . GetLatestUpdateTime() . ")"; ?></center></h1>


<h1 class="">This Month</h1>
<div class="col-xs-6 col-sm-6 col-md-3">
    <div class="box c1 center-block">
        <h4 class="blue">Today</h4>
        <span class="icon blue"><i class="fa fa-usd"></i></span>
        <span class="price-large blue"><?php echo round(GetTodayEarnings(), 2); ?></span>
    </div>
</div>

Instead of requesting the API data on a user request, I would instead have a background script/program running every 10 minutes which caches the results in memcached or MySQL. Then when a user requests the data, return the cached results. If the API takes 10+ seconds to process, then without looking at the code to potentially optimise it we have to assume 10+ seconds is just how long it takes to process. Caching is the only way to speed up the user request without optimising the API.

You could use JavaScript to async load the script then modify the document once the page has loaded. Below is an example using Jquery.

$(document).ready(function(){
        $.ajax({
            type: "GET",
            url: "myApiCalls.php",
            dataType: 'json',
            data: queryString,
            success: function(data) {
                // ...
            }
        });
});

Thanks to @Leon Storey, while reading his answer with "data: queryString," and answering him I had a nice idea which I want to show here ofc for people who has the problem too.

For people like @RiggsFolly who things I wanted just use a copy paste here get codes written for me and judging me first without understanding the problem (with even "-1" I think) I wanted to say again: My problem was that I have a many defined php functions which requests data from an external api (currently I store the data for 10 minutes, in this time it will not use the api). Since I said I want to make load content first then update values like numbers with the requests I didn't know where to start to work with it and use it together with jquery or maybe with other ideas. Just wanted to know what is there possible.

Now what I did to solve this. Php has great two functions.

function_exists("func");

call_user_func("func");

with ajax together I made this

$(document).ready(function(){
    $.ajax({
        type: "post",
        url: "apicalls.php",
        data: {callfunction: 'GetTotalEarnings'},
        success: function(data) {
            alert(data);
        }
    });
});

This will give an alert if api request is done. Now lets see the apicalls.php

include "apirequest.php";

if(isset($_POST['callfunction'])) {
    $func = $_POST['callfunction'];

    if(function_exists($func)) {
        echo call_user_func($func);
    } else {
        die("This function does not exists");
    }
}

This means I do not need to rewrite my "apirequest" php file. I just use a little helper like a pipeline to let it work with ajax requests. The problem is now completely solved