Question

在以下代码中，第（a）行将触发事件＆＃39; readystatechange＆＃39;并且在记录＆＃34;结束＆＃34;之前将this.readyState记录到控制台。在（b）行。我想知道为什么会这样。回调是否应该放在事件队列中，并且只在主脚本完成后执行？

    const somePath = 'https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange';
    const xhr = new XMLHttpRequest();
    console.log(xhr.readyState); // will output 0
    xhr.addEventListener('readystatechange', function() {
        console.log(this.readyState)
    }); 
    xhr.open('GET', somePath, true); // (a) will output 1 to console
    console.log('ends'); // (b)

Answer 1

这里的关键是事件（至少在这种情况下）被称为同步，而不是异步。这并不是函数调用被添加到队列的末尾 - 而是当xhr.open运行并且readystatechange事件发生时，xhr内部的代码将遍历附加的侦听器同步并执行它们。

代码结构类似于以下内容：

const obj = (() => {
  const listeners = [];
  const addListener = fn => listeners.push(fn);
  const doSomething = () => {
    console.log('doing something');
    listeners.forEach(listener => listener());
  };
  return { addListener, doSomething };
})();
obj.addListener(() => console.log('listener running'));
obj.doSomething();
console.log('end of main thread');

XMLHttpRequest的readystatechange事件在当前脚本结束之前触发

1 个答案: