如何在不刷新页面的情况下每分钟自动更新股票价格?

时间:2017-12-22 16:51:36

标签: javascript json ajax

我想每分钟更新一次页面上的股票价格并显示新价格而不刷新页面。你能帮我解决一下这个问题。

 $(function () {
    var stocks = [];
    var symbols = ['AAPL', 'MSFT'];

    symbols.forEach(symbol => makeAjaxCall(symbol));

    function makeAjaxCall(param) {
        $.ajax({
            type: "GET",
            url: "https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=" + param + "&interval=1min&apikey=8TKKZE0GET944FMW",
            success: function (result) {
                stocks = result;
                getPrices();
            }
        });
    }

    function getPrices() {
        var metaData = stocks["Meta Data"],
            timeSeries = stocks["Time Series (1min)"],
            symbol = metaData["2. Symbol"];
        var priceList2 = '';
        Object.getOwnPropertyNames(lastDate).forEach(function (val, idx, array) {
            priceList += val + ': ' + lastDate[val] + '<br>';
        });

        document.getElementById("demo").innerHTML += '<div class="eachStock"><a href="#" data-stock="' + symbol + '">' + symbol + '</a></div><div>' + priceList + '</div>';
    }
});

我的html文件:

<div id="demo"></div>

谢谢!

1 个答案:

答案 0 :(得分:1)

首先在函数调用中包装所有代码:

dplyr

你需要确保它可以被多次调用,它不能追加值,而是替换(只需清除开头的div,如const loadData = () => { var stocks = []; var symbols = ['AAPL', 'MSFT']; symbols.forEach(symbol => makeAjaxCall(symbol)); function makeAjaxCall(param) { $.ajax({ type: "GET", url: "https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=" + param + "&interval=1min&apikey=8TKKZE0GET944FMW", success: function (result) { stocks = result; getPrices(); } }); } function getPrices() { var metaData = stocks["Meta Data"], timeSeries = stocks["Time Series (1min)"], symbol = metaData["2. Symbol"]; var priceList2 = ''; Object.getOwnPropertyNames(lastDate).forEach(function (val, idx, array) { priceList += val + ': ' + lastDate[val] + '<br>'; }); document.getElementById("demo").innerHTML += '<div class="eachStock"><a href="#" data-stock="' + symbol + '">' + symbol + '</a></div><div>' + priceList + '</div>'; } }; )。然后,您可以使用documentation来经常调用您的函数。不要忘记只在加载页面时启动它(你使用的是jquery,还有其他选项):

document.getElementById("demo").innerHTML = ''

请注意,如果请求的时间超过const TIME = 2 * 1000; // time in millis for next update $(() => { loadData(); setInterval(loadData, TIME); }); ,则可能会出现并发问题。要获得更好的解决方案,请查看setInterval。他们将允许更清晰的代码。

如果您仅使用jquery进行请求制作和“已加载页面”事件,则可能需要学习更新的替代方案(例如PromisesFetch API)。