AJAX: Почему setTimeout несколько раз регистрирует запрос xhr (обратный вызов)?

Question

Я пытаюсь понять, как работает XMLHttpRequest и async. В следующем коде setTimeout выполняет обратный вызов после 7s. Я не уверен, почему он регистрирует xhr.responsetype //true 3 раза? (см. скриншот)

var xhr = new XMLHttpRequest();

xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts')
xhr.send()

xhr.onreadystatechange = function(e) {
  setTimeout(function(){ 
   if(xhr.readyState == 4 && xhr.status == 200) {
    console.log('xhr.responseType')
    console.log(xhr.responseType == "")
   } else {
     console.log('YOUR XNJR Request failed')
   }
  }, 7000)
}
console.log('Logged after some time')

Кроме того, как превратить указанный выше код в запрос async?

Спасибо