Chociaż nie jestem pewien czy temat dobrze odzwierciedla problem. Sporo mi zajęło przeszukiwanie kodu, gdzie jest problem i zminimalizowałem go (chyba) już do samego problemu:
var newValue = 0;
var addConst = 0;
function start() {
const dataFromLS = JSON.parse(localStorage.getItem('valuesInStore'));
newValue += addConst;
console.log(document.getElementById("show").innerHTML = Math.round(newValue) + parseInt(dataFromLS[0]));
document.getElementById("show").innerHTML = Math.round(newValue) + parseInt(dataFromLS[0]);
setTimeout(start, 1000);
};
document.addEventListener("DOMContentLoaded", function(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var values = JSON.parse(this.responseText);
console.log(values[0]);
const valuesInStore = {0: values[0], 1: values[1], 2: values[2], 3: values[3], 4: values[4]};
localStorage.setItem('valuesInStore', JSON.stringify(valuesInStore));
}
};
xmlhttp.open("GET", "../phpfiles/ajaxphpfiles/r_array.php", true);
xmlhttp.send();
});
document.addEventListener("DOMContentLoaded", function(){
const dataFromLSB = JSON.parse(localStorage.getItem('valuesInStore2'));
if(dataFromLSB[1] == 0) {
addConst = 0;
} else {
addConst = /*jakiś długi wzór*/
}
start();
});
1) Deklaruję funkcję start.
2) Używam XMLHttpRequest do pobrania zmiennych z php, które pochodzą z bazy danych.
3) Ponownie używam XMLHttpRequest, do pobrania zmiennych z php, które również pochodzą z bazy danych (już nie wrzucałem kodu, aby było bardziej czytelne, a i tak nie jest istotny).
4) Tworzę anonimową funkcję do której pobieram dane z pkt 3 i obliczam na ich podstawie wartość, którą użyję w funkcji "start".
5) Wywołuję funkcję "start".
6) Funkcja "start" pobiera dane z pkt 2 i w pętli co sekundę inkrementuje wartość z pkt 4 by następnie wyświelić na stronie/w consoli ową wartość, powiększoną o wartość z punktu trzeciego.
np.
dataFromLS[0] = 1000;
addConst = 0,5;
Więc co sekundę stan (uwzględniając zaokrąglanie) będzie wyglądał tak: 1000, 1000, 1001, 1001, 1002 itd.
W konsoli powinno to wyglądać tak:
1000 scripts_template.js:20 (console.log z pkt 2)
2 1001 scripts_template.js:8 (console.logi z pkt 6)
2 1002 scripts_template.js:8
2 1003 scripts_template.js:8
2 1004 scripts_template.js:8
A tymczasem, przed tym pojawia się jeszcze jedna linijka:
995 scripts_template.js:8
Ta linijka, pokazuje wartość z poprzedniego odświeżenia strony, więc gdyteraz odświeżę stronę, to w tym miejscu pokaże:
1000 scripts_template.js:8
I teraz problem polega na tym, że z używając inner.html pierwsza wartość po odświeżeniu strony pojawia się np. te 995, a potem (w zależności jak dużo czasu minęło) skacze np. do 1200 i potem dopiero normalnie 1201, 1202 itd.
Wygląda to tak, jakby funkcja start przy pierwszym wczytaniu pliku js wykonywała tą funkcję, lub wykonywała ją przed pobraniem danych w pkt 2. Zapewne przez synchorniczne pobranie. I nie mogę znaleźć odpowiedzi jak opóźnić wykonanie do czasu pobrania nowych wartości. Nie takiej, która by zadziałała i co ważniejsze, bym zrozumiał, a nie tylko przeklepał kod.
