В основном вы спрашиваете, как запланировать выполнение вашего кода в будущем. Для этого встроены следующие механизмы: setTimeout(), который запускает объекты один раз, и setInterval(), который запускает их несколько раз. Например, вы могли бы:
setInterval(function () {
var xhr = new XMLHttpRequest();
xhr.onload = function(){
document.write(this.responseText)
};
xhr.open("GET","https://api.coindesk.com/v1/bpi/currentprice/USD.json",true);
xhr.send();
}, 10 * 1000);
Это запускает ваш код каждые 10 секунд. (10 умножено на 1000 миллисекунд.) Однако существует проблема, заключающаяся в том, что ваш запрос GET может занять более 10 секунд для завершения. Это особенно верно для плохих мобильных соединений и каналов с высокой задержкой, таких как спутниковые пользователи. Чтобы решить эту проблему, вам нужно вместо этого использовать setTimeout() и запустить ваш код после завершения первого запроса. Не забудьте также включить регистр ошибок, так как вы не хотите, чтобы ваш цикл останавливался, если есть только одна ошибка. Чтобы упростить все это, я переключусь на использование Fetch API . (Fetch - это то, что вам следует использовать в наши дни. Он более надежен, чем XHR, и хорошо поддерживается браузерами.)
function updatePrices() {
return fetch('https://api.coindesk.com/v1/bpi/currentprice/USD.json').then({
if (res.ok) {
throw new Error('Request failed');
}
return res.json()
}).then((data) => {
console.log(data);
setTimeout(updatePrices, 10 * 1000);
}).catch((e) => {
setTimeout(updatePrices, 5 * 1000); // If fail, try again sooner
});
}
updatePrices();
Теперь у вас есть обновления каждые 10 секунд. Но вы просили в реальном времени . Для этого вам понадобится другой инструмент .. отправленные сервером события .
Если вы управляете сервером, вы можете выбрать поддержку этого простого текстового протокола. Это позволяет серверу отправлять вам данные сразу же после их обновления. Настроить источник событий на клиенте очень просто:
const eventSource = new EventSource('https://example.com/bitcoin-prices');
eventSource.addEventListener('message', (e) => {
console.log(e.data);
});
EventSource будет даже переподключаться, если соединение потеряно.
Надеюсь, это поможет вам начать!