「JavaScript/変数」の版間の差分
削除された内容 追加された内容
syntaxhighlight |
タグ: 2017年版ソースエディター |
||
227 行
<!-- 最後まで「1 秒間隔で 0, 1, 2 と出力するプログラム」にはなっていないと思う。Promise での実装を最後に書くべき？ -->
;1 秒間隔で 0, 1, 2 と出力したい:<syntaxhighlight lang="JavaScript">
// 1 秒間隔で 0, 1, 2 と出力したい▼
for (var i = 0; i < 3; i++) {
setTimeout(function() {
235 ⟶ 234行目:
}
</syntaxhighlight>
;実行結果:<syntaxhighlight lang="JavaScript">
</syntaxhighlight>
▲ 3
と
:<syntaxhighlight lang="JavaScript">
</syntaxhighlight>
にはなりません。
また、1秒ほど経過した後3行同時に表示する動きになります。
261 ⟶ 262行目:
1
です。
=== クロージャ ===
クロージャとは、関数を束ねて（囲んで）、その周囲の状態（字句環境）を参照する組み合わせのことです。言い換えると、クロージャを使うと、内側の関数から外側の関数のスコープにアクセスできるようになります。JavaScriptでは、クロージャは関数が作成されるたびに、関数作成時に作成されます。
;[https://paiza.io/projects/rJ7mv205qRheU9D5ZB-Ljg?language=javascript 1 秒間隔で 0, 1, 2 と出力したい（改）]:<syntaxhighlight lang="JavaScript">
var start = Date.now()
for (var i = 0; i < 3; i++) {
setTimeout((function(x) {
return function() {
console.log(Date.now() - start,"ms: ", x);
}
})(i), 1000);
}
</syntaxhighlight>
;実行結果:<syntaxhighlight lang="JavaScript">
1001 ms: 0
1007 ms: 1
1007 ms: 2
</syntaxhighlight>
:この様に、クロージャのレキシカルスコープを利用すれば、コールバックにパラメータを安定して渡すことができます。
:しかし、このコードも'''1秒ほど経過した後3行同時に表示する動き'''は改善されません。
;[https://paiza.io/projects/ZzpvO65SuVqGXhb3aP5rHw?language=javascript 1 秒間隔で 0, 1, 2 と出力したい（改：時間管理改善版）]:<syntaxhighlight lang="JavaScript">
var start = Date.now()
for (var i = 0; i < 3; i++) {
setTimeout((function(x) {
return function() {
console.log(Date.now() - start,"ms: ", x);
}
})(i), 500 * i);
}
</syntaxhighlight>
;実行結果:<syntaxhighlight lang="JavaScript">
1 ms: 0
501 ms: 1
1001 ms: 2
</syntaxhighlight>
:setTimeout()にわたすインターバルにイテレーション変数で乗じました。
::実行環境がタイム・アウトする関係で、500msインターバルにしました。
:これで当初の「1 秒間隔で 0, 1, 2 と出力するプログラム」は達成できました。
=== ブロックスコープ ===
| |||