ページを更新せずに毎分株価を自動的に更新できますか？

Question

毎分私のページの株価を更新し、ページを更新せずに新しい価格を表示したいのですが。これを行う方法を教えてください。

$(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> 

ありがとう！

Answer 1

最初の関数呼び出しですべてのコードをラップ：（だけで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>'; 
    } 
}; 

あなたはそれが何度も呼び出すことができることを確認する必要があり、それが値を追加し、それに置き換わるものではありませ必要があります最初は、document.getElementById("demo").innerHTML = ''のように）。次に、setIntervalを使用して、頻繁に関数を呼び出すことができます。ページがロードされている場合にのみ、それを開始することを忘れてはいけない（あなたはそのためのjQueryを使用していた、他のオプションがあります）：要求がTIMEよりも時間がかかる場合、あなたは同時実行の問題を得るかもしれないことを

const TIME = 2 * 1000; // time in millis for next update 
$(() => { 
    loadData(); 
    setInterval(loadData, TIME); 
}); 

注意。より良い解決方法は、Promisesをご覧ください。彼らはよりクリーンなコードを可能にします。

リクエストを作成するためだけにjqueryを使用していて、 'ページがロードされました'というイベントの場合は、新しい代替案（Fetch APIとthis eventなど）を習得するとよいでしょう。