So for the last session before the afternoon break, we have Phillip Roberts who works at

休憩、私たちはで働くフィリップロバーツがあります アンデアとは、ロンドン - スコットランド出身です。

Andea and is here from London ‑‑ Scotland.

エジンバラうわー、10秒の記憶、 彼はベントループについて話します。もし

Edinbrough.

誰もがフィリップに大きなブラウンを与えることができます 拍手のラウンド。

 ‑‑ wow, ten second memory, he's going to talk about the vent loop.

>> Phillip Roberts：皆さん、こんにちは。 サイドトラックに来るために、それは素晴らしいです

If everyone could give Phillip a big brownedder round of applause.

それがここに詰まっているのを見るために。みんなできますか ストレッチをください。ストレッチする必要があったので

>> Phillip Roberts: Okay hello everyone, thanks for coming to the side track, it's awesome

私は変わって見えません。について話したい イベントループと一体何がイベントなのか

to see it packed out in here.

JavaScript内のイベントループのように、ループします。 彼が私がAndYetのために働くと言ったので、最初に

Can everyone give me a stretch.

これは素晴らしい小さなDevの店です。 アメリカ、リアルタイムで助けが必要な場合は私たちを調べてください

I needed to stretch, so I look less weird.

もの。それが私たちが得意とするところです。だから、について 18か月前 - 私は有料のプロのJavaScriptです。

I want to talk about the event loop and what the heck is the event loop, as in the event

開発者 - 私は自分自身にどのようにするのかと思いました JavaScriptは実際に動作しますか？そして私は完全ではなかった

loop inside JavaScript.

確かに。私はV8という言葉を聞いたことがある、クロムのランタイム それが何を意味しているのか、それが何を意味しているのか、本当にわかりません

So first up, as he said I work for AndYet which is an awesome little Dev shop in the

した。シングルスレッドのようなものが聞こえた 私がコールバックを使っているのは明らかです。どうやって

US, look us up if you need help with real‑time stuff.

コールバックは機能しますか？私はの旅を始めました 読書や研究、実験が好きです

That's what we're good at.

基本的に起動したブラウザで この。

So, about 18 months ago--I'm a paid professional JavaScript developer--I thought to myself

- 私はJavaScriptのようなものでした あなたですか？私はシングルスレッドシングル同時です

how does, like JavaScript actually work?

言語の権利ええ、クール、私は持っています コールスタック、イベントループ、コールバックキュー

And I wasn't entirely sure.

そして他のいくつかのAPIともの。 - 儀式。 私はコンピュータサイエンスの学位を取得していません。私

I'd heard V8 as a term, chrome's Runtime didn't really know what that meant, what that did.

つまり、これらの言葉は、言葉なので、聞いたことがある V8とさまざまなランタイムについて

I'd heard things like single threaded, you know obviously I'm using callbacks.

ブラウザなので私はV8を見ましたあなたは電話がありますか スタック、イベントループ、コールバックキュー

How do callbacks work?

他のいくつかのAPIともの、私はコールスタックを持っています そしてヒープ、私はそれらの他に何を知りません

I started a journey of like reading and research and experimenting in the browser which basically

物事は、大丈夫、面白いので基本的に 18ヶ月が経ちました。そして私はこれを手に入れたと思います。

started like this.

（笑）だから、これは私がしたいものです 今日あなたと共有しましょう。うまくいけば、これは

 ‑‑ I was kind of like JavaScript what are you.

比較的JavaScriptが初めての場合に便利です。 JavaScriptがなぜ奇妙なのか理解するのに役立ちます

I'm a single threaded single concurrent language ‑‑ right.

他の言語と比較すると なぜコールバックが問題なのか、原因

yeah, cool, I have a call stack, an event loop, a callback queue, and some other APIs

私たちは地獄だが必須です。そしてもしあなたが うまくいけば、経験豊富なJavaScript開発者

and stuff.

ランタイムがどのようにしてあなたにいくつかの新鮮な洞察を与える 作品を使っているので、考えてみましょう

 ‑‑ rite.

それは少し良くなりました。 JavaScriptを見れば ランタイムそのものであるV8のようなランタイム自体

I did not do a computer science degree.

Chromeの中。これは JavaScriptランタイムとはヒープ、どこ

I mean, these words, they're words, so I heard about V8 and the various Runtimes and different

メモリ割り当てが起こります 呼び出しスタック、ここであなたのスタック

browsers so I looked to V8 do you have a call stack, an event loop, a callback queue, and

フレームはそのようなものですが、 もしあなたが好きなら、V8コードベースをクローンしてgrep

some other APIs and stuff, I have a call stack and a heap, I don't know what those other

setTimeout、DOM、HTTPなどの場合 要求、彼らはそこにいない、彼らはしない

things are, okay, interesting so basically 18 months passed.

私には驚きました。それは 考え始めるときに最初に使うもの

And I think I get this.

非同期のものについては、それはV8のソースにはありません。 うーん...おもしろい。だから、この18ヶ月以上

(Laughing) and so, this is what I want to share with you today.

発見の私はこれが本当にであることに気づくようになりました、 これは本当に大きな絵です、これは

Hopefully this will be useful if you're relatively new to JavaScript, help you understand why

今日あなたを乗船させたいのですが これらの作品が何であるかを理解し、私たちは持っています

JavaScript is so weird when you compare it to other languages you might used why callbacks

V8ランタイムですが、それから私たちはこれらのことを持っています Web APIと呼ばれるもので、

are a thing, cause us hell but are required.

ブラウザが提供します。 DOM、AJAX、タイムアウト、 そのようなこと、私たちはこの神話の出来事を持っています

And if you're an experienced JavaScript developer hopefully give you some fresh insights how

ループとコールバックキュー。きっときっと 以前にこれらの用語のいくつかを聞いたことがありますが、

the Runtime you're using works so you can think about it a little better.

あなたはこれらの部分がどのようにして理解されていないか 一緒に引っ張る。だから、私はから始めるつもりです

So if we look at the JavaScript Runtime itself like V8 which is the Runtime inside Chrome.

初めは、このうちのいくつかは新しいものになるでしょう。 言葉は人々、他の人々にとって新しいかもしれません

This is a simplified view of what JavaScript Runtime is.

これを取得します。私達はすぐに動くつもりです これが明らかな場合は、ここから先に進んでください。

The heap, where memory allocation happens, and then there's the call stack, which is

多くの人にとってはそうではないと思います。そう、 JavaScriptはシングルスレッドプログラミングです

where your stack frames are and all that kind of stuff, but, if you, like, clone the V8

言語、シングルスレッドランタイム、それは持っています 単一の呼び出しスタックそしてそれは一つのことができる

code base and grep for things like setTimeout or DOM or HTTP request, they're not in there,

一度に、それがシングルスレッドの意味です。 プログラムは一度に1つのコードを実行できます。

they don't exist in V8, which was a surprise to me.

時間。それでは、それを試してみましょう。 その意味を理解するために

It's first thing you use when you start thinking about async stuff and it's not in the V8 source.

左側にこのようなコードがあると いくつかの関数、関数乗数があります

Hmm ... interesting.

これは2つの数を乗算します。 同じ数を2回かけて呼び出す

So, over this 18 months of discovery I come to realize this is really, this is really

数の二乗を表示する関数 squareを呼び出してからconsole.logを呼び出す

the bigger picture, this is what I'm hoping to get you on board with today and understand

そして私たちのファイルの一番下に私たちは実際に 印刷広場を実行し、このコードはすべて良いですか？作る

what these pieces are, we have the V8 Runtime but then we have these things called web APIs

センス？クール。それで、これを実行するならば、まあ、私はするべきです ステップをバックアップするので、コールスタックは基本的に

which are extra things that the browser provides.

それは基本的に記録するデータ構造です プログラムのどこにいるのか

DOM, AJAX, time out, things like that, we have this mythical event loop and the callback

関数です。スタックに何かを置きます。 関数から戻ると、ポップアウトします。

queue.

すべてのスタックができるスタックのトップ このファイルを実行すると、

I'm sure you've heard some of these terms before, but maybe you don't quite understand

ファイルのような、メイン関数の一種 それ自体、それで、我々はそれをスタックにプッシュします。

how these pieces pull together.

それから私たちはいくつかの関数定義を持っています、それらは 世界の状態を定義するのと同じように、

So, I'm going to start from the beginning, some of this will be new, to words might be

そして最後に、正方形を印刷するようになりました、右 したがって、print squareは関数呼び出しです。

new to people, other people will get this.

それをスタックにプッシュして、そしてすぐに 印刷広場の中で、積み重ねを押します。

We're going to quickly move on from here, bear with me if this is obvious, I think for

これは乗算を呼び出す、今我々はリターンを持っている 文は、AとBを掛けて戻ります。

a lot of people it's not.

戻ったら、スタックから何かをポップします。 そう、ポップ、スタックの乗数、返す

So, JavaScript is a single threaded programming language, single threaded Runtime, it has

正方形に、印刷正方形、console.logに戻ります、 返品はありません、暗黙のうちに

a single call stack.

関数の終わりに到達しました。 そうすることは、それを視覚化したようなものです。

And it can do one thing at a time, that's what a single thread means, the program can

茎を呼ぶ、それは意味がありますか？ （はい、フィル） あなたが電話について考えていなかったとしても

run one piece of code at a time.

スタックする前に、出会ったときに出会った ブラウザサイドの開発を行っているので

So, let's try and visualize that just to get our heads around what that mean, so if I have

このようなコードがあれば、関数baz これはbarを呼び出し、Fooを呼び出します。

some code like this on your left, we've got a few functions, a function multiplier which

Chromeで実行するとエラーになります。 そして、それはスタックトレースを出力します。

multiplies two numbers, square which calls multiply with the same number twice, a function

そのエラーが発生したときのスタックの状態 そう、キャッチされていないエラーおっとFoo、バー、バズ、匿名

which prints the square of a number of calling square and then calling console.log and then

これが私たちのメインです。同様に、あなたがいるならば スタックを吹くような言葉を聞いた

at the bottom of our file we actually run print square, this code all good?

その一例です。 fooという関数があります これはFooを呼び出すので、どうなるでしょう

Make sense?

？ fooを呼び出す関数mainがあります。 これはfooを呼び出し、これはfooを呼び出します。

Cool.

foo、そして最終的にはchromeは fooを16000回再帰的に呼び出すという意味ではありません。

So, if we run this, well, I should back up a step, so the call stack is basically ‑‑

私はあなたのために物事を殺します あなたのバグがどこにあるのかを理解しましょう。そう

it's a data structure which records basically where in the program we are, if we step into

私は新しい面を代表しているかもしれませんが 呼び出しスタックについては、ある程度の感覚があります

a function, we put something on to the stack, if we return from a function, we pop off the

あなたの開発慣習ではすでに。そう、 大きな問題は、何が起こるのかということです。

top of the stack that's all the stack can do, ‑‑ so if you run this file, there's

物事が遅いときは？だから、私たちはブロッキングについて話します そして行動を阻止し、阻止する、

kind of a main function, right, like the file itself, so, we push that on to the stack.

存在するものとそうでないものの厳密な定義はない ブロッキング、実際には遅いコードです。

Then we have some function definitions, they're just like defining the state of the world,

そのため、console.logは遅くはなく、whileループを実行します。 1から100億から遅い、ネットワーク要求

and finally we got to print square, right, so print square is a function call, so we

遅いです。画像リクエストは遅いです。物事 どれが遅く、そのスタック上に何が

push that on to the stack, and immediately inside print square, push on to the stack,

ブロッキング手段です。それで、ちょっとした例があります、 だから我々は持っているとしましょう、これは偽物のようなものです

which calls multiply, now we have a return statement, we multiply A and B and we return,

ちょっとしたコード、getSynchronous、正しい、jQueryのような AJAXリクエストのようなものです。何が起こるだろう

when we return we pop something off the stack, so, pop, multiplier of the stack, returning

それらは同期要求でした。 非同期コールバックについては同期しています。

to square, return to print square, console.log, there's no return, it's implicit, because

私たちが持っているようにそれを通過するならば、私たちは電話します getSyncしてから待つ。

we got to the end of the function, and we're done so that's like a visualization of the

ネットワーク要求をしている、ネットワークは相対的です コンピュータに、遅い、うまくいけばそのネットワーク

call stalk, does that make sense?

リクエストが完了したら、先に進みます。 進む。待って、そしてこのネットワーク要求を意味する

(Yes, Phil) even if you haven't thought about the call stack before, you've come across

決して終わらないかもしれないので…そうだ、私は私がすると思います 家に帰る。最後にこれら3つ、あなたはブロッキングを知っています

it when you've been doing browser‑side development, so if we have code like this, a function baz

行動は完了し、スタックをクリアできます。 右。だからプログラミング言語では単一です

which calls bar, which calls Foo, which throws an error if we run it in Chrome we see this.

スレッドを使用しています Ruby、それが起こるのです、そう、私達は作ります

And it prints the stack trace, right, the state of the stack when that error happened,

ネットワーク要求、私たちはただ待つまでしなければならない 処理方法がないので、完了です。

so, uncaught error oops Foo, bar, Baz, anonymous function, which is our main.

それ。なぜこれが実際に問題なのでしょうか。の 問題はブラウザでコードを実行しているためです。

Equally, if you've heard the term like blowing the stack, this is an example of that.

それでは、ここに行きましょう。そう これはまさに、これはChromeです、これは

Have a function foo which calls Foo , so what's going to happen ? We have a function main

実行したばかりのコードブラウザは私たちに与えない - よく彼らは私たちに同期AJAX要求を与えます、

which calls foo which calls foo, which calls foo, which calls foo, and ultimately chrome

大きなwhileループを使ってこれを偽造しています、 同期だから、基本的には

says, you probably didn't mean to call foo 16,000 times recursively, I'll just kill things

続行する前に5秒間ループします。 ここでコンソールを開くと見える

for you and you can figure out where your bug lies, right.

何が起こるか、だからリクエストfoo.comで、なぜ これは起こっています、私は何もすることができませんね。

So although I may be representing a new side of the call stack you have some sense of it

実行ボタンでもレンダリングが完了していない クリックしたという事実。ブラウザは

in your development practice already.

ブロックされている、動けなくなっている、何もできない それらの要求が完了するまで。それからすべて

So, the big question then comes is like what happens when things are slow?

私はいくつかのことをしたので、地獄は緩んで壊れ、それは 私はそれができたことを考え出した、それはできませんでした

So, we talk about blocking and blocking behavior and blocking, there's no strict definition

実際にレンダリングしてください。何もできませんでした。 そのコールスタックが物事を持っている場合

of what is and didn't blocking, really it's just code that's slow.

その上で、そしてここでそれはこれらのええを持っている、それは まだ行きます。同期リクエストがあります。

So console.log isn't slow, doing a while loop from one to ten billion is slow, network requests

ブラウザは他に何もできません。できない 他のコードを実行することはできません。

are slow.

立ち往生。理想的ではない 流動的なUIを手に入れるために、

Image requests are slow.

スタック。では、これをどのように処理するのでしょうか。まあ 私たちが提供している最も簡単な解決策は非同期です

Things which are slow and on that stack are what are blocking means.

コールバック、ブロッキング関数はほとんどありません ブラウザでは、ノードでも同じですが、それらはすべてです。

So heres a little example, so let's say we have, this is like a fake bit of code, getSynchronous,

非同期にしました いくつかのコードを実行し、それにコールバックを与え、そして実行します。

right, like jQuery is like, AJAX request.

あとでJavaScriptを見たことがある方は 非同期コールバックを見た、これは何をする

What would happen if those were synchronous requests, forget what we know about async

実際のように見えます。思い出させる簡単な例 私たちがいるところの人々。このようなコード、console.log

callbacks they're synchronous.

こんにちは。書いて、setTimeoutを実行しますが、それは キューは将来のコンソールログなのでスキップします

If we go through it like we have, we call getSync and then we wait, because then we're

JSConfに進み、5秒後に 「そこ」にログを記録する、理にかなっている？ハッピー。基本的に

doing network request, network is relative to computers, are slow, hopefully that network

それはsetTimeoutが何かをしているということです。そう、 に関する非同期コールバック

requests completes, we can move on, wait, move on.

以前見たスタック...これはどのように機能するのですか？ コードを実行しましょう。 Console.logこんにちは。 setTimeout

Wait, and, I mean, this network request might never finish, so ... yeah, I guess I'll go

すぐには実行されないことがわかっています。 5秒で走ります

home.

スタックにプッシュできない、どういうわけか 消えるだけで、私たちには道がない

Finally those three, you know blocking behaviors complete and we can clear the stack, right.

これについてはまだ説明していませんが、 それ。 5秒後にJSConfEUをログに記録します

So in a programming language is single threaded you're not using threads like say Ruby, that's

どういうわけか魔法のように「そこ」がスタックに現れます。 それはどのように起こりますか？そしてそれは - これ

what happens, right, we make a network request, we have to just wait till it's done, because

基本的にイベントループが発生する場所です 並行性についてそうです、私は

we have no way of handling that.

部分的に嘘をついていると言って JavaScriptは一度に1つのことしかできません。

Why is this actually a problem?

それはJavaScriptランタイムができることは本当です 一度に一つのことをする。できない

The problem is because we're running code in browsers.

あなたが他のコードをやっている間AJAXリクエスト。 あなたがしている間それはsetTimeoutをすることはできません

So, let's you ‑‑ here we go, okay.

別のコードできること 同時にブラウザが

So this is just, this is Chrome, this is the code I just ran.

ただランタイムです。だから、この図を覚えて、 JavaScriptランタイムは1つのことをすることができます

Browsers don't give us ‑‑ well they do give us synchronous AJAX request, I'm faking

時間が、ブラウザは私達にこれらの他を与えます 物事は、私たちはこれらのAPIを提供し、これらを与える

this out with a big while loop, because it's synchronous, I basically while loop for five

事実上スレッドです、あなたはただ作ることができます ブラウザの呼び出し、およびブラウザのそれらの部分

seconds before continuing, so if I open up the console here.

この同時実行が始まるのを知っている。 このダイアグラムが見えるバックエンドの人

We can see what happens, so with request foo.com, why this is happening, I can't do anything,

ウェブではなく、基本的にノードに対して同一 APIにはC ++ APIがあり、スレッドは

right, even the run button hasn't finished rerendering the fact that I clicked it.

C ++によってあなたから隠されている。今我々は持っています この絵はこのコードがどのように実行されるかを見てみましょう

The browser is blocked, it's stuck, it can't do anything until those requests complete.

ブラウザの外観のより完全な全体像に 好きです。だから、前と同じように、コードを実行し、コンソール

And then all hell breaks loose because I did some stuff,it figured that out I'd done it,

こんにちはログ、こんにちはコンソールに、こんにちはログします。今 setTimeoutを呼び出したときに何が起こるかを見ることができます。

it couldn't actually render it.

このコールバック関数を渡します setTimeout呼び出しの遅延今setTimeout

Couldn't do anything.

ブラウザによって提供されるAPIです。 V8のソースには含まれていません。

That's because if that call stack has things on it, and here it's got these yeah, it's

私たちのもの JavaScriptを実行していることを確認してください。

still going.

ブラウザはタイマーを開始します。 君は。そして今、それはカウントを処理するつもりです

We've got the synchronous request, the browser can't do anything else.

そう、それは私たちのsetTimeoutを意味します。 電話をかけて、それ自体が完成したので、ポップできます

It can't render, it can't run any other code, it's stuck.

スタックをオフにします。 「JSConfEU」、明確、そう、 これで、Web APIにこのタイマーがありました。

Not ideal, right if we want people to have nice fluid UIs, we can't block the stack.

5秒後には完了する予定です。今 ウェブAPIはただあなたの修正を始めることはできません

So, how do we handle this?

コード、それはスタックにものをチャックすることはできません 準備ができたらそれが現れたら

Well the simplest solution we're provided with is asynchronous callbacks, there's almost

コードの途中でランダムに タスクキューまたはコールバックキューの場所

no blocking functions in the browser, equally in node, they're all made asynchronous, which

いずれかのWeb APIがコールバックをプッシュします。 完了したら、タスクキューに移動します。最後に

basically means we run some code, give it a callback, and run that later, if you've

イベントのループ、話のタイトルにたどり着きます。 一体何がイベントループなのか

seen JavaScript you've seen asynchronous callbacks, what does this actually look like.

この方程式全体の中で最も単純な小片 そしてそれは1つの非常に単純な仕事をします。

Simple example to remind people where we're at.

イベントループの仕事はスタックを見ることです そしてタスクキューを見てください。スタックが

Code like this, console.log hi.

空の場合、キューの最初のものになります そしてそれを効果的にスタックにプッシュします。

Write, we run the setTimeout, but that queue's the console log for future so we skip on to

それを実行します。だからここで私たちは今そのスタックを見ることができます タスクキューにコールバックがあります。

JSConf and then five seconds later we log "there" right, make sense?

イベントループが実行されると、 何かをして、コールバックを

Happy.

スタック。スタックはJavaScriptのようなものだということを忘れないでください。 土地、V8の内側に戻ると、コールバックが表示されます。

Basically that's setTimeout is doing something.

スタック上で、console.log「there」を実行します。 これで終わりです。それは理にかなっていますか？みんな

So, asynchronous callbacks with regards to the stacks we saw before ... how does this

私はどこ？驚くばかり！はい。だから、今見ることができます これがおそらく最初のうちの1つとどのように動作するか

work?

Async関連のものがあったはずの出会い これは奇妙な理由で誰かが言う

Let's run the code.

setTimeout zeroを呼び出す必要があります。 さて、あなたは私にゼロで関数を実行してほしい

Console.log hi. setTimeout.

時間？なぜ私はそれをsetTimeoutでラップするのでしょうか？ あなたがこれに遭遇したのは初めてのように、

We know it doesn't run immediately, we know it's going to run in five seconds time, we

あなたは私のようです、私はそれが何かをしているのを見ます、しかし 理由はわかりません。その理由は、一般的に、

can't push it on to the stack, somehow it just disappears, we don't have like a way

あなたがまで何かを延期しようとしている場合 スタックは明らかです。だから私たちは見て知っている

of describing this yet, but we'll come to it.

あなたがJavaScriptを書いたのであれば、これは 同じ結果になるでしょう、私たちは行きます

We log JSConfEU, clear, five seconds later somehow magically "there" appears on the stack.

「こんにちは」、「JSConf」、「there」が表示されます。 最後に表示される予定です。見える

How does that happen?

どうやってそれが起こるのか。 setTimeoutゼロ、今 それはすぐに完了してプッシュするつもりです

And that's ‑‑ this is basically where the event loop comes in on concurrency.

それをキューに入れ、私が言ったことを覚えている イベントループ、スタックまで待つ必要がある

Right, so I've been kind of partially lying do you and telling you that JavaScript can

それはコールバックをプッシュすることができる前に明確です あなたのスタックはスタックへと続くでしょう。

only do one thing at one time.

実行するには、console.log“ hi”、“ JSConfEU” そして明らかに、今イベントループはキックすることができます

That's true the JavaScript Runtime can only do one thing at one time.

そしてあなたのコールバックを呼びなさい。それは一例です setTimeoutゼロの場合、その実行は延期されています

It can't make an AJAX request while you're doing other code.

最後の理由にかかわらず、コードの スタックまたはスタックが明確になるまで。はい。

It can't do a setTimeout while you're doing another code.

つまり、これらすべてのWeb APIは同じように機能します。 AJAXリクエストがある場合は、AJAXリクエストを行います。

The reason we can do things concurrently is that the browser is more than just the Runtime.

コールバックでURLにアクセスしても、同じように動作します。 方法、おめでとう、コンソールログ、「こんにちは」、

So, remember this diagram, the JavaScript Runtime can do one thing at a time, but the

AJAXリクエスト、それを実行するためのコード AJAXリクエストがJavaScript Runtimeに存在しません

browser gives us these other things, gives us these we shall APIs, these are effectively

しかし、Web APIとしてブラウザでは、私たちはスピン URLのコールバック、コードでそれを作り上げます

threads, you can just make calls to, and those pieces of the browser are aware of this concurrency

実行し続けることができます。そのXHR要求まで 完了するか、または完了することはありません、それは

kicks in.

大丈夫、スタックは実行を続けることができます 完了し、キューにプッシュされ、ピックされます

If you're back end person this diagram looks basically identical for node, instead of web

イベントループによって起動して実行されます。それは 非同期呼び出しが発生したときに起こるすべてのこと。

APIs we have C++ APIs and the threading is being hidden from you by C++.

狂気の複雑な例をやってみましょう、私は願っています あなたが気付いていないなら、これはうまくいくでしょう

Now we have this picture let's see how this code runs in a more full picture of what a

これらすべてが基調講演になっています このデッキ全体で500のアニメーションステップを知っている。

browser looks like.

（コードが爆発し、アニメーションが炎上する）（拍手） J Whew ...いや…そう…おもしろい、私たちは

So, same as before, run code, console log hi, logs hi to the console, simple.

リンクを与えられた。うーん...これは十分に大きいです、 人々は見ることができますか？さて、基本的に私は書いた

now we can see what happens when we call setTimeout.

講演後、スコットランドJSのこの講演 私はスライドの半分を破ったができなかった

We are ‑‑ we pass this callback function and a delay to the setTimeout call.

それはすべてのスライドをやり直すことに煩わしい 基調講演のお尻の全体の痛みでした

Now setTimeout is an API provided to us by the browser, it doesn't live in the V8 source,

もっと簡単なルートを取ったので（笑） JavaScriptを視覚化できるツールを書くことの利点

it's extra stuff we get in that we're running the JavaScript run

実行時に実行時、そしてそれはループと呼ばれます。 それでは、この例を実行してみましょう。

time in.

私たちが持っていた例のようなものでした 前のスライド、私はまだXHRをシミングしていません、

The browser kicks off a timer for you.

それは実行可能ではありません。あなたとして コードを見ることができます、我々は何かを記録するつもりです、

And now it's going to handle the count down for you, right, so that means our setTimeout

これはaddEventListener、setTimeoutのまわりのシムです。 それではconsole.logを実行します。 -

call, itself is now complete, so we can pop off the stack.

実行して、何が起こるのかを確認します。 ... DOM APIを追加し、タイムアウトを追加します。コードは

“JSConfEU”, clear, so, now we've got this timer in the web API, which five seconds later

実行し続け、コールバックをプッシュします 実行されているキューにこれで終わりです。

is going to complete.

ここをクリックしたらそれが…トリガー Web APIでは、クリックのコールバックをキューに入れます。

Now the web API can't just start modifying your code, it can't chuck stuff onto the stack

実行してください。私は百回をクリックすると 何が起こるか見ることができます。クリックして、クリック

when it's ready if it did it would appear randomly in the middle of your code so this

すぐには処理されない、それ自体 キューが取得されると、キューにプッシュされます。

is where the task queue or callback queue kicks in.

処理された、最終的に私のクリックがしようとしている 対処しなさい、そう。だから私はもう少し持っている

Any of the web APIs pushes the callback on to the task queue when it's done.

例ここで実行するつもりです。ここに 私たちは行く、大丈夫、そう、私はただ走るつもりだ

Finally we get to the event loop, title of the talk, what the heck is the event loop

ちょっと話をするためのいくつかの例 あなたが遭遇したかもしれないいくつかのこと

is like the simplest little piece in this whole equation, and it has one very simple

Async APIでは考慮されていません。 この例では、setTimeoutを4回呼び出します。

job.

1秒遅れて、console.log "こんにちは"。コールバックがキューに入れられるまでに...

The event loops job is to look at the stack and look at the task queue.

4回目のコールバック 遅れて、それはまだ待っている、コールバック

If the stack is empty it takes the first thing on the queue and pushes it on to the stack

実行されていませんね。