javascript - 替代 setInterval 来更新 API 调用的值

Question

我目前使用 setInterval 每 10 秒调用一次 API 请求，

但它不是更新值，而是向页面添加值

我认为这是因为我在调用值时将代码设计为+=。

我不知道该用什么来代替......

在工作中看到它 https://plnkr.co/edit/BEdYpVhJGCXyTPnAP482?p=preview

 // Code goes here
var time = setInterval(function(){

const url = "https://api.kraken.com/0/public/Ticker?pair=xbtusd"; // Change 
this 
to your URL
fetch(url,{ mode: "cors"})
.then(function(response) {
      if(response.status == 200) { // Check if response went through
          response.json().then(function(data) { 
              console.log(data); 
              var price_USD = document.getElementById('price-usd');
              var USDPrice = '<p>BTCUSD Price:' + 
((data.result.XXBTZUSD.c[0])*1.1).toFixed(2) + '$' + '</p>';
              price_USD.innerHTML += USDPrice;
          });
      } else { // Response wasn't ok. Check dev tools
          console.log("response failed?");
          console.log(response); 
      } 
});


const urleur = "https://api.kraken.com/0/public/Ticker?pair=xbteur"; // Change 
this to your URL
fetch(urleur,{ mode: "cors"})
.then(function(response) {
      if(response.status == 200) { // Check if response went through
          response.json().then(function(data) { 
              console.log(data); 
              var price_USD = document.getElementById('price-usd');
              var USDPrice = '<p>BTCEUR Price:' + 
((data.result.XXBTZEUR.c[0])*1.1).toFixed(2) + '€' +  '</p>';
              price_USD.innerHTML += USDPrice;
          });
      } else { // Response wasn't ok. Check dev tools
          console.log("response failed?");
          console.log(response); 
      } 
});

},10000);

Answer 1

我发现 2 个错误。

1. 这两个函数都在更新 Price_USD 元素。
2. 而不是 price_USD.innerHTML += USDPrice;你可以做price_USD.innerHTML = USDPrice;和price_EUR.innerHTML = EURPrice;