Цикл событий JavaScript: почему моя функция щелчка выполняется перед другими задачами в очереди?

Question

Насколько я знаю, очередь событий JavaScript заполняется событиями браузера, такими как click или отложенные функции, такие как setTimeout, Затем цикл обработки событий будет непрерывно проверять текущий стек вызовов и, если он пуст, будет выполнять первую задачу в очереди до тех пор, пока та не завершится полностью. После этого будет выполнено следующее задание в очереди и так далее.

Поэтому я подумал, что следующая функция должна заполнить очередь 1000 delay функции:

function run() {
  for (var i = 0; i < 1000; i++) {
    setTimeout(delay, 0);
  }
}

Это будет означать, что теперь 1000 функций в очереди. И если задержка займет некоторое время, это должно заблокировать очередь на некоторое время. Но, как вы можете видеть из предоставленного фрагмента, который не соответствует действительности (сначала нажмите кнопку "Сделать много!", Которая запустит таймауты, затем нажмите кнопку "Сделать один раз!" И убедитесь, что она также работает)

Таким образом, хотя я добавил все эти функции в очередь, я все еще могу нажать кнопку и click Обработчик событий все равно будет выполняться между ними, несмотря на то, что он был добавлен в очередь позже. Почему это так?

$(function () {
  $("#do-many").click(run);
  $("#do-once").click(single);
});

var counter = [0,0];


function run() {
  for (var i = 0; i < 1000; i++) {
    setTimeout(delay, 0);
  }
}

function delay() {
  for (var i = 0; i < 10000000; i++) {
    
  }
  update(0);
}

function single() {
  update(1);
}

function update(idx) {
    counter[idx] += 1;
    $("#c" + idx).text("Count " + idx + ": " + counter[idx]);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <button id="do-once">Do Once!</button>
 <button id="do-many">Do Many!</button>
 <div id="c0"></div>
 <div id="c1"></div>