Асинхронный код
Стек вызовов.
Очередь событий.
Event Loop.
Синхронный код
Синхронный код
function prepareBeans() {
console.log('Перемолоть кофейные зерна');
}
function addWater() {
console.log('Добавить немного воды');
}
function onStove() {
console.log('Поставить на плиту');
}
Синхронный код
prepareBeans();
addWater();
onStove();
Синхронный код
prepareBeans(); // 'Перемолоть кофейные зерна'
addWater();
onStove();
Синхронный код
prepareBeans(); // 'Перемолоть кофейные зерна'
addWater(); // 'Добавить немного воды'
onStove();
Синхронный код
prepareBeans(); // 'Перемолоть кофейные зерна'
addWater(); // 'Добавить немного воды'
onStove(); // 'Поставить на плиту'
Стек вызовов
JavaScript
- 1 поток => 1 операция за раз
- 1 стек вызовов
function prepareCoffee() {
onStove();
}
function wakeUp() {
prepareCoffee();
}
wakeUp();
(function () {
function prepareCoffee() {
onStove();
}
function wakeUp() {
prepareCoffee();
}
wakeUp();
})();
function prepareCoffee() {
onStove();
}
function wakeUp() {
prepareCoffee();
}
wakeUp();
function prepareCoffee() {
onStove();
}
function wakeUp() {
prepareCoffee();
}
wakeUp();
IIFE
function prepareCoffee() {
onStove();
}
function wakeUp() {
prepareCoffee();
}
wakeUp();
wakeUp
IIFE
function prepareCoffee() {
onStove();
}
function wakeUp() {
prepareCoffee();
}
wakeUp();
prepareCoffee
wakeUp
IIFE
function prepareCoffee() {
onStove();
}
function wakeUp() {
prepareCoffee();
}
wakeUp();
onStove
prepareCoffee
wakeUp
IIFE
function prepareCoffee() {
onStove();
}
function wakeUp() {
prepareCoffee();
}
wakeUp();
prepareCoffee
wakeUp
IIFE
function prepareCoffee() {
onStove();
}
function wakeUp() {
prepareCoffee();
}
wakeUp();
wakeUp
IIFE
function prepareCoffee() {
onStove();
}
function wakeUp() {
prepareCoffee();
}
wakeUp();
IIFE
function prepareCoffee() {
onStove();
}
function wakeUp() {
prepareCoffee();
}
wakeUp();
function onStove() {
throw new Error('No electricity');
}
function prepareCoffee() {
onStove();
}
function wakeUp() {
prepareCoffee();
}
wakeUp();
Uncaught Error: No electricity
at onStove (<anonymous>:2:11)
at prepareCoffee (<anonymous>:6:5)
at wakeUp (<anonymous>:10:5)
at <anonymous>:13:1
Откуда асинхронность?
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
IIFE
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
console.log
IIFE
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
IIFE
1
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
setTimeout
IIFE
1
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
IIFE
1
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
console.log
IIFE
1
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
IIFE
1
2
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
1
2
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
cb
1
2
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
console.log
cb
1
2
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
cb
1
2
3
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
1
2
3Очередь событий
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
IIFE
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
console.log
IIFE
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
IIFE
1
0 sec
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
setTimeout
IIFE
1
0 sec
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
IIFE
1
0 sec
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
console.log
IIFE
1
0 sec
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
IIFE
1
2
0 sec
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
1
2
5 sec
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
cb
1
2
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
cb
1
2
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
console.log
cb
1
2
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
cb
1
2
3
console.log(1);
setTimeout(function cb() {
console.log(3);
}, 5000);
console.log(2);
1
2
3setTimeout
setTimeout(() => {
console.log('Я выполнюсь через 5 секунд.')
}, 5000);
setTimeout(console.log, 5000, 'Я выполнюсь через 5 секунд.');
function onStove() {
console.log('Поставить на плиту');
}
function fromStove() {
console.log('Снять с плиты');
}
onStove();
setTimeout(fromStove, 5000);
function onStove() {
console.log('Поставить на плиту');
}
function fromStove() {
console.log('Снять с плиты');
}
onStove();
setTimeout(fromStove, 5000);
function onStove() {
console.log('Поставить на плиту');
}
function fromStove() {
console.log('Снять с плиты');
}
onStove();
setTimeout(fromStove, 5000);
'Поставить на плиту'
function onStove() {
console.log('Поставить на плиту');
}
function fromStove() {
console.log('Снять с плиты');
}
onStove();
setTimeout(fromStove, 5000);
'Поставить на плиту'
function onStove() {
console.log('Поставить на плиту');
}
function fromStove() {
console.log('Снять с плиты');
}
onStove();
setTimeout(fromStove, 5000);
fromStove
'Поставить на плиту'
function onStove() {
console.log('Поставить на плиту');
}
function fromStove() {
console.log('Снять с плиты');
}
onStove();
setTimeout(fromStove, 5000);
'Поставить на плиту'
'Снять с плиты'
const timerId = setTimeout(fromStove, 5000);
clearTimeout(timerId);
Проблема
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Сallback');
}, 1000);
hardWork();
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Сallback');
}, 1000);
hardWork();
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
IIFE
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
setTimeout
IIFE
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
IIFE
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
hardWork
IIFE
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
Date.now
hardWork
IIFE
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
hardWork
IIFE
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
Date.now
hardWork
IIFE
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
Date.now
hardWork
IIFE
cb
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
Date.now
hardWork
IIFE
cb
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
hardWork
IIFE
cb
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
console.log
hardWork
IIFE
cb
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
hardWork
IIFE
cb
'Done'
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
IIFE
cb
'Done'
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
cb
'Done'
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
cb
'Done'
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
console.log
cb
'Done'
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
cb
'Done'
'Callback'
function hardWork() {
const start = Date.now();
while (Date.now() - start < 3000) {}
console.log('Done');
}
setTimeout(function cb() {
console.log('Callback');
}, 1000);
hardWork();
'Done'
'Callback'
Выводы
- setTimeout гарантирует, что событие произойдёт не раньше указанного времени
- Разбивать большие функции на маленькие
setInterval
setInterval(() => {
console.log('Я буду выполняться каждые 5 секунд.')
}, 5000);
setInterval(console.log, 5000, 'Я буду выполняться каждые 5 секунд.');
function onStove() {
console.log('Поставить на плиту');
}
function stir() {
console.log('Помешивать');
}
onStove();
setInterval(stir, 1000);
function onStove() {
console.log('Поставить на плиту');
}
function stir() {
console.log('Помешивать');
}
onStove();
setInterval(stir, 1000);
function onStove() {
console.log('Поставить на плиту');
}
function stir() {
console.log('Помешивать');
}
onStove();
setInterval(stir, 1000);
'Поставить на плиту'
function onStove() {
console.log('Поставить на плиту');
}
function stir() {
console.log('Помешивать');
}
onStove();
setInterval(stir, 1000);
'Поставить на плиту'
function onStove() {
console.log('Поставить на плиту');
}
function stir() {
console.log('Помешивать');
}
onStove();
setInterval(stir, 1000);
stir
'Поставить на плиту'
function onStove() {
console.log('Поставить на плиту');
}
function stir() {
console.log('Помешивать');
}
onStove();
setInterval(stir, 1000);
'Поставить на плиту'
'Помешивать'
function onStove() {
console.log('Поставить на плиту');
}
function stir() {
console.log('Помешивать');
}
onStove();
setInterval(stir, 1000);
stir
'Поставить на плиту'
'Помешивать'
function onStove() {
console.log('Поставить на плиту');
}
function stir() {
console.log('Помешивать');
}
onStove();
setInterval(stir, 1000);
'Поставить на плиту'
'Помешивать'
'Помешивать'
function onStove() {
console.log('Поставить на плиту');
}
function stir() {
console.log('Помешивать');
}
onStove();
setInterval(stir, 1000);
stir
'Поставить на плиту'
'Помешивать'
'Помешивать'
function onStove() {
console.log('Поставить на плиту');
}
function stir() {
console.log('Помешивать');
}
onStove();
setInterval(stir, 1000);
'Поставить на плиту'
'Помешивать'
'Помешивать'
'Помешивать'
const timerId = setInterval(stir, 1000);
clearInterval(timerId);
Проблема
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
function hardWork() {
// этот код выполняется 50 мс
}
console.log('Start');
setInterval(function cb(){
hardWork();
console.log('Done');
}, 100);
IIFE
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
console.log
IIFE
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
IIFE
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
setInterval
IIFE
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
IIFE
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
cb
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
cb
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
hardWork
cb
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
hardWork
cb
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
cb
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
console.log
cb
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
hardWork
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
hardWork
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
console.log
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
cb
'Start'
'Done'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setInterval(function cb() {
hardWork();
console.log('Done');
}, 100);
'Start'
'Done'
'Done'
Выводы
- setInterval гарантирует, что событие произойдёт не раньше указанного времени
- setInterval vs. setTimeout
setInterval → setTimeout
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
IIFE
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
console.log
IIFE
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
IIFE
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
setTimeout
IIFE
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
IIFE
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
cb
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
cb
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
hardWork
cb
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
hardWork
cb
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
cb
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
console.log
cb
'Start'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
setTimeout
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
hardWork
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
hardWork
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
console.log
cb
'Start'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
cb
'Start'
'Done'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
setTimeout
cb
'Start'
'Done'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
cb
'Start'
'Done'
'Done'
function hardWork() {
// этот код выполняется 50 мс
};
console.log('Start');
setTimeout(function cb() {
hardWork();
console.log('Done');
setTimeout(cb, 100);
}, 100);
'Start'
'Done'
'Done'
Перерыв
⏰
Нулевая задержка
function beHappy() {
console.log('Насладиться результатом');
}
setTimeout(beHappy, 0);
console.log('Много-много дел');
function beHappy() {
console.log('Насладиться результатом');
}
setTimeout(beHappy, 0);
console.log('Много-много дел');
function beHappy() {
console.log('Насладиться результатом');
}
setTimeout(beHappy, 0);
console.log('Много-много дел');
IIFE
function beHappy() {
console.log('Насладиться результатом');
}
setTimeout(beHappy, 0);
console.log('Много-много дел');
setTimeout
IIFE
function beHappy() {
console.log('Насладиться результатом');
}
setTimeout(beHappy, 0);
console.log('Много-много дел');
IIFE
beHappy
function beHappy() {
console.log('Насладиться результатом');
}
setTimeout(beHappy, 0);
console.log('Много-много дел');
console.log
IIFE
beHappy
function beHappy() {
console.log('Насладиться результатом');
}
setTimeout(beHappy, 0);
console.log('Много-много дел');
IIFE
beHappy
'Много-много дел'
function beHappy() {
console.log('Насладиться результатом');
}
setTimeout(beHappy, 0);
console.log('Много-много дел');
beHappy
'Много-много дел'
function beHappy() {
console.log('Насладиться результатом');
}
setTimeout(beHappy, 0);
console.log('Много-много дел');
beHappy
'Много-много дел'
function beHappy() {
console.log('Насладиться результатом');
}
setTimeout(beHappy, 0);
console.log('Много-много дел');
'Много-много дел'
'Насладиться результатом'Работа с файлами
const fs = require('fs');
const fileName = __dirname + '/data.json';
const data = fs.readFileSync(fileName, 'utf-8');
console.log(data);
'{"name": "Savi"}'
const fs = require('fs');
const fileName = __dirname + '/data.json';
const start = Date.now();
const data = fs.readFileSync(fileName, 'utf-8');
console.log(`readFileSync: ${Date.now() - start}ms`);
console.log(data);
readFileSync: 4ms
'{"name": "Savi"}'
const fs = require('fs');
const fileName = __dirname + '/data.json';
console.time('readFileSync');
const data = fs.readFileSync(fileName, 'utf-8');
console.timeEnd('readFileSync');
console.log(data);
readFileSync: 3ms
'{"name": "Savi"}'
const fs = require('fs');
const fileName = __dirname + '/bigData.json';
console.time('readFileSync');
const data = fs.readFileSync(fileName, 'utf-8');
console.timeEnd('readFileSync');
console.log(data);
readFileSync: 3567ms
<Много-много текста>
const fs = require('fs');
const fileName = __dirname + '/data.json';
const data = fs.readFile(fileName, 'utf-8');
console.log(data);
undefined
const fs = require('fs');
const fileName = __dirname + '/data.json';
fs.readFile(fileName, 'utf-8', function cb(err, data) {
console.log(data);
});
const fs = require('fs');
const fileName = __dirname + '/data.json';
fs.readFile(fileName, 'utf-8', function cb(err, data) {
console.log(data);
});
const fs = require('fs');
const fileName = __dirname + '/data.json';
fs.readFile(fileName, 'utf-8', function cb(err, data) {
console.log(data);
});
IIFE
API
const fs = require('fs');
const fileName = __dirname + '/data.json';
fs.readFile(fileName, 'utf-8', function cb(err, data) {
console.log(data);
});
fs.readFile
IIFE
API
const fs = require('fs');
const fileName = __dirname + '/data.json';
fs.readFile(fileName, 'utf-8', function cb(err, data) {
console.log(data);
});
IIFE
API
const fs = require('fs');
const fileName = __dirname + '/data.json';
fs.readFile(fileName, 'utf-8', function cb(err, data) {
console.log(data);
});
API
const fs = require('fs');
const fileName = __dirname + '/data.json';
fs.readFile(fileName, 'utf-8', function cb(err, data) {
console.log(data);
});
cb
API
const fs = require('fs');
const fileName = __dirname + '/data.json';
fs.readFile(fileName, 'utf-8', function cb(err, data) {
console.log(data);
});
cb
API
const fs = require('fs');
const fileName = __dirname + '/data.json';
fs.readFile(fileName, 'utf-8', function cb(err, data) {
console.log(data);
});
console.log
cb
API
const fs = require('fs');
const fileName = __dirname + '/data.json';
fs.readFile(fileName, 'utf-8', function cb(err, data) {
console.log(data);
});
cb
'{"name": "Savi"}'
API
const fs = require('fs');
const fileName = __dirname + '/data.json';
fs.readFile(fileName, 'utf-8', function cb(err, data) {
console.log(data);
});
'{"name": "Savi"}'
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFileSync(fileName1, 'utf-8');
fs.readFileSync(fileName2, 'utf-8');
fs.readFileSync(fileName3, 'utf-8');
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
console.time('readFileSync')
fs.readFileSync(fileName1, 'utf-8');
fs.readFileSync(fileName2, 'utf-8');
fs.readFileSync(fileName3, 'utf-8');
console.timeEnd('readFileSync')
readFileSync: 9217ms
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
IIFE
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
fs.readFile
IIFE
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
IIFE
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
fs.readFile
IIFE
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
IIFE
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
fs.readFile
IIFE
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
IIFE
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
cb2
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
cb2
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
cb3
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
cb3
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секунду
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секудну
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
cb1
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секудну
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
cb1
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секудну
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
Проблема
const fs = require('fs');
const fileName1 = __dirname + '/data_1.json';
const fileName2 = __dirname + '/data_2.json';
const fileName3 = __dirname + '/data_3.json';
fs.readFile(fileName1, 'utf-8', cb1); // читается 5 секунд
fs.readFile(fileName2, 'utf-8', cb2); // читается 1 секудну
fs.readFile(fileName3, 'utf-8', cb3); // читается 3 секунды
cb2
cb3
cb1
Event Loop
Цикл событий (Event Loop) — это то, что позволяет Node.js выполнять блокирующие операции ввода/вывода путем выгрузки операций в ядро системы, не блокируя основной поток.
while (queue.waitForMessage()) {
queue.processNextMessage();
}
┌───────────────────────┐
┌─>│ таймеры │ [cb1, cb2, cb3, ..]
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ I/O коллбэки │ [cb1, cb2, cb3, ..]
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
│ │ ожидание, подготовка │
│ └──────────┬────────────┘ ┌───────────────┐
│ ┌──────────┴────────────┐ │ входящие: │
│ │ опрос │<─────┤ соединения, │ [cb1, ..]
│ └──────────┬────────────┘ │ данные, итд.│
│ ┌──────────┴────────────┐ └───────────────┘
│ │ проверка │ [cb1, cb2, cb3, ..]
│ └──────────┬────────────┘
│ ┌──────────┴────────────┐
└──┤ коллбэки 'close' │ [cb1, cb2, cb3, ..]
└───────────────────────┘
Фаза "таймеры"
setTimeout
setInterval
Фаза "I/O коллбэки"
const fs = require('fs');
const fileName = __dirname + '/data.json';
fs.readFile(fileName, 'utf-8', function (err, data) {
console.log(data);
});
'{"engine": "V8"}'