説明
イベントリスナ登録の代わりにsetTimeout
を用いて概要を説明します.
JavaScript
1for (var i = 0; i < 5; ++i) {
2 setTimeout(function () {
3 console.log(i);
4 }, 1000);
5}
これだとすべてループ終了時の5を参照することになってしまいます.そのため,目的の動作を実現するためには,変数i
の束縛が必要です.
JavaScript
1for (var i = 0; i < 5; ++i) {
2 setTimeout((function (i) {
3 return function () {
4 console.log(i);
5 };
6 })(i), 1000);
7}
もしくはECMA Script 6の機能を使っていいのであればvar
の代わりにlet
を使えば解決します.この宣言は自動的に変数をブロックスコープで束縛します.
JavaScript
1'use strict';
2
3for (let i = 0; i < 5; ++i) {
4 setTimeout(() => console.log(i), 1000);
5}
実装
今回の場合は,i
ではなくjson[i]
で束縛してしまったほうがわかりやすいかもしれません.
【ES5までの書き方】
JavaScript
1var json = [1, 2, 3, 4, 5];
2for (var i = 0; i < json.length; ++i) {
3 $('<a href="#">Click Me!</a>')
4 .appendTo('body')
5 .click((function (value) {
6 return function () {
7 console.log(value);
8 return false;
9 };
10 })(json[i]));
11}
【ES6以降の書き方】
JavaScript
1'use strict';
2
3const json = [1, 2, 3, 4, 5];
4for (const value of json) {
5 $('<a href="#">Click Me!</a>')
6 .appendTo('body')
7 .click(() => {
8 console.log(value);
9 return false;
10 });
11}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。