Przeszedłem przez API, które podaje mi informacje w formacie json, otrzymałem cenę waluty i wyświetlałem ją na ekranie za pomocą JavaScript. I oczywiście umieściłem je w funkcji, która ajax aktualizuje informacje co x sekund.

Potrzebuję kodu, który pobiera aktualną wartość ceny, następna wartość otrzymanej ceny porównuje te dwie, a jeśli nowa cena jest wyższa niż poprzednia, na przykład tło zmienia kolor na zielony lub wyświetla alert. A gdyby było mniej niż poprzednie, tło zmieniłoby się na czerwone.

Mój kod:

var auto_refresh = setInterval(
  function() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("bids1").innerHTML = myObj.BTCUSDT['bids']['0']['0'];
      }
    };
    xmlhttp.open("GET", "all.json", true);
    xmlhttp.send();

  }, 1000);
-1
hyrcanweb 5 styczeń 2022, 15:29

2 odpowiedzi

Najlepsza odpowiedź

Korekta

Proszę odnieść się do odpowiedzi mplungjan powyżej, aby uzyskać bardziej poprawny sposób na zrobienie tego. Chociaż dodanie zmiennej tak, jak określiłem, jest dobrym sposobem na poradzenie sobie z tym, Twój istniejący sposób na okresowe pobieranie danych nie jest właściwym sposobem na zrobienie tego i powinieneś rozważyć zmianę tego, jak określono w mplungjan!

Oryginalna odpowiedź

Zwykle zalecałbym użycie zmiennej globalnej (lub przynajmniej poza twoją funkcją), aby utrzymać aktualną cenę i porównać z nią pobraną wartość.

// initialize the current price
let currentPrice = 0;

var auto_refresh = setInterval(function () {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var myObj = JSON.parse(this.responseText);
            
            let newPrice = myObj.BTCUSDT['bids']['0']['0'];

            if (newPrice > currentPrice) {
                // alert, set some other attribute, etc.

            }

            // update the global variable and the HTML
            currentPrice = newPrice;
            document.getElementById("bids1").innerHTML = currentPrice;
        }
    };
    xmlhttp.open("GET", "all.json", true);
    xmlhttp.send();

}, 1000);

W zależności od wymagań możesz oczywiście również przeprowadzać różne kontrole i porównania w programie obsługi żądań http.

-2
fravolt 5 styczeń 2022, 15:55
Dziękuję za aktualizację :)
 – 
mplungjan
5 styczeń 2022, 15:59

Nie używaj interwału w Ajax

let val = 0;
const bids = document.getElementById("bids1");

function getData() {
  fetch('all.json')
  .then(response => response.json())
  .then(data => {
    const newVal = myObj.BTCUSDT['bids']['0']['0'];
    bids.innerHTML = newVal
    bids.classList.toggle("green",val > newVal)
    bids.classList.toggle("red",val < newVal)
    val = newVal;
    setTimeout(getData,1000)
  })
}  
getData()
0
mplungjan 5 styczeń 2022, 15:53
1
Dziękuję za uwagę, zmieniłem swoją odpowiedź, aby odnieść się do Twojej. Podczas pisania mojej oryginalnej odpowiedzi nie zaglądałem dalej w istniejący kod. Uwaga, nie jestem pewien, czy to celowe, ale wygląda na to, że w porównaniach zamieniłeś val i newVal, ponieważ teraz cena zmieni kolor na zielony, jeśli spadnie, podczas gdy OP (w jego przykład) wspomniał o tym na odwrót.
 – 
fravolt
5 styczeń 2022, 15:58