Resumo JS do ciclo de eventos

JavaScript é single-threaded ou seja, motor de JS na implementação e interpretação de código JS, é feito em um fio, e esta discussão é o chamado "segmento principal", mas na verdade quando se lida com uma série de outras operações especiais , serão realizados exclusivamente para a abertura de novos tópicos, tais como:

• processamento de solicitação Ajax
• Tratamento de eventos DOM
• cronômetro
• Leia e arquivos de gravação
  , e assim por diante, estes são o que chamamos de operação "assíncrona".
  Quando o código está sendo executado para eles, eles querem executar o código vamos nesta matéria após a conclusão do registro, hora de chegada, e vão desencadear estas funções de registro.
  Mas quando é que vamos saber quais tarefas devem optar por fazer? Este é o mecanismo previsto no modelo de ciclo de eventos JavaScript.

mecanismo introduzido

O thread principal mecanismo de execução de JavaScript gera uma pilha e uma pilha em tempo de execução.
código de programa, a fim de entrar na pilha (último a sair).
Ao chamar setTimeout () método correspondente, o módulo do kernel navegador começa a escutar condições de disparo ocorrer.
Se a condição de disparo é alcançada, o método de retorno de chamada irá ser adicionado à fila de tarefas.
Quando o código de pilha motor estiver concluída, o segmento principal será ler a fila de tarefas, seguido pela implementação para atender a condição de disparo função de retorno.

exemplo 1

console.log('start');  // 入栈，执行出栈

//Timer1    入栈，出栈把回调函数放入timer模块
setTimeout(function(){
    console.log('hello');
},200);

//Timer2   同上
setTimeout(function(){
    console.log('world');
},100);

console.log('end'); // 入栈，执行出栈
// 执行栈已经被清空，这时候Timer模块检查异步代码
// 如果触发条件达成，回调函数加入任务队列
// Timer2早于Timer1被加入到任务队列中，主线程空闲，于是检查任务队列是否有可以执行的，以此循环检查。

exemplo 2

console.log(1);
//Time1
setTimeout(function(){
    console.log(2);
},300);
//Time2
setTimeout(function(){
    console.log(3)
},400);

// for循环所需时间长，此时前面两个回调函数都已在任务队列
for (var i = 0;i<10000;i++) {
    console.log(4);
}
//Time3
setTimeout(function(){
    console.log(5);
},100);

fila de macro e micro Fila

fila de tarefas é dividido em duas categorias, uma é a fila de macro, é micro fila.
fila macro em cada ciclo de eventos apenas executar um extracto,
micro fila irá fila de todas as tarefas são extraídos com o seguinte extracto adicional.
E micro prioridade de execução de tarefas fila do que a tarefa de verificar a fila de macro.

por exemplo

// （回调）加入微队列
process.nextTick(() => {
  console.log('nextTick')
})

// 加入宏队列
setTimeout(() => {
  console.log('setTimeout1')
})

// then回调加入微队列
Promise.resolve()
  .then(() => {
    console.log('then')
  })

// 加入宏队列
setTimeout(() => {
  console.log('setTimeout2')
})

// 主线程，先执行
console.log('end')

Após a extremidade de saída, o amontoado de divisórias principal está vazia.
Cheques micro fila não estiver vazia, existem dois já se juntou, todos executados.
Olhe para a fila de macro, embora haja dois, mas desta vez apenas para executar uma.
E, em seguida, uma segunda rodada de circulação, apenas uma tarefa deixada fila macro.
Assim, o resultado é:

end nextTick then setTimeout1 setTimeout2

PS: Eu tive esta parte no resumo relevante Promise também teve pouco resumo, desta vez ligada à compreensão mais profunda.

fila de agentes macro

• setTimeout
• setInterval
• setImmediate
• requestAnimationFrame
• I / O
• renderização de UI

Micro representa a fila

• process.nextTick
• Promessas
• Object.observe
• MutationObserver