teratail
回答率
85.48%
質問するログイン新規登録
トップJavaScriptに関する質問あらかじめ作成したファンクションをクリックイベントに登録したい

編集履歴

回答編集履歴

10

a

2016/04/14 02:42

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -59,22 +59,6 @@
59
59
  for (let i = 0; i < 5; ++i) {
60
60
 
61
61
  setTimeout(() => console.log(i), 1000);
62
-
63
- }
64
-
65
- ```
66
-
67
-
68
-
69
- あるいはES5でも，`setTimeout`に引数を渡す場合は**その時点で`i`の値が評価されるので**こういう書き方もできます．
70
-
71
-
72
-
73
- ```JavaScript
74
-
75
- for (var i = 0; i < 5; ++i) {
76
-
77
- setTimeout(console.log, i, 1000);
78
62
 
79
63
  }
80
64
 

9

a

2016/04/14 02:42

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -66,6 +66,22 @@
66
66
 
67
67
 
68
68
 
69
+ あるいはES5でも，`setTimeout`に引数を渡す場合は**その時点で`i`の値が評価されるので**こういう書き方もできます．
70
+
71
+
72
+
73
+ ```JavaScript
74
+
75
+ for (var i = 0; i < 5; ++i) {
76
+
77
+ setTimeout(console.log, i, 1000);
78
+
79
+ }
80
+
81
+ ```
82
+
83
+
84
+
69
85
  # 実装
70
86
 
71
87
 
@@ -90,7 +106,7 @@
90
106
 
91
107
  .click((function (value) {
92
108
 
93
- return function (e) {
109
+ return function () {
94
110
 
95
111
  console.log(value);
96
112
 

8

a

2016/04/14 02:42

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -1,3 +1,7 @@
1
+ # 説明
2
+
3
+
4
+
1
5
  イベントリスナ登録の代わりに`setTimeout`を用いて概要を説明します．
2
6
 
3
7
 
@@ -59,3 +63,75 @@
59
63
  }
60
64
 
61
65
  ```
66
+
67
+
68
+
69
+ # 実装
70
+
71
+
72
+
73
+ 今回の場合は，`i`ではなく`json[i]`で束縛してしまったほうがわかりやすいかもしれません．
74
+
75
+
76
+
77
+ 【ES5までの書き方】
78
+
79
+
80
+
81
+ ```JavaScript
82
+
83
+ var json = [1, 2, 3, 4, 5];
84
+
85
+ for (var i = 0; i < json.length; ++i) {
86
+
87
+ $('<a href="#">Click Me!</a>')
88
+
89
+ .appendTo('body')
90
+
91
+ .click((function (value) {
92
+
93
+ return function (e) {
94
+
95
+ console.log(value);
96
+
97
+ return false;
98
+
99
+ };
100
+
101
+ })(json[i]));
102
+
103
+ }
104
+
105
+ ```
106
+
107
+
108
+
109
+ 【ES6以降の書き方】
110
+
111
+
112
+
113
+ ```JavaScript
114
+
115
+ 'use strict';
116
+
117
+
118
+
119
+ const json = [1, 2, 3, 4, 5];
120
+
121
+ for (const value of json) {
122
+
123
+ $('<a href="#">Click Me!</a>')
124
+
125
+ .appendTo('body')
126
+
127
+ .click(() => {
128
+
129
+ console.log(value);
130
+
131
+ return false;
132
+
133
+ });
134
+
135
+ }
136
+
137
+ ```

7

a

2016/04/14 02:37

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -42,7 +42,7 @@
42
42
 
43
43
 
44
44
 
45
- もしくはECMA Script 6の機能を使っていいのであれば`let`を使えば解決します．
45
+ もしくはECMA Script 6の機能を使っていいのであれば`var`の代わりに`let`を使えば解決します．この宣言は自動的に変数をブロックスコープで束縛します．
46
46
 
47
47
 
48
48
 
@@ -54,7 +54,7 @@
54
54
 
55
55
  for (let i = 0; i < 5; ++i) {
56
56
 
57
- setTimeout(() => console.log(i), 1000);
57
+ setTimeout(() => console.log(i), 1000);
58
58
 
59
59
  }
60
60
 

6

a

2016/04/14 02:16

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -26,7 +26,7 @@
26
26
 
27
27
  for (var i = 0; i < 5; ++i) {
28
28
 
29
- setTimeout((function () {
29
+ setTimeout((function (i) {
30
30
 
31
31
  return function () {
32
32
 

5

a

2016/04/14 02:13

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  console.log(i);
12
12
 
13
- }, 3);
13
+ }, 1000);
14
14
 
15
15
  }
16
16
 
@@ -34,7 +34,7 @@
34
34
 
35
35
  };
36
36
 
37
- })(i), 3);
37
+ })(i), 1000);
38
38
 
39
39
  }
40
40
 
@@ -54,7 +54,7 @@
54
54
 
55
55
  for (let i = 0; i < 5; ++i) {
56
56
 
57
- setTimeout(() => console.log(i), 3);
57
+ setTimeout(() => console.log(i), 1000);
58
58
 
59
59
  }
60
60
 

4

a

2016/04/14 02:11

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -26,21 +26,15 @@
26
26
 
27
27
  for (var i = 0; i < 5; ++i) {
28
28
 
29
- setTimeout(
29
+ setTimeout((function () {
30
30
 
31
- (function () {
31
+ return function () {
32
32
 
33
- return function () {
33
+ console.log(i);
34
34
 
35
- console.log(i);
35
+ };
36
36
 
37
- };
38
-
39
- })(i),
37
+ })(i), 3);
40
-
41
- 3
42
-
43
- );
44
38
 
45
39
  }
46
40
 

3

a

2016/04/14 02:11

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -36,9 +36,11 @@
36
36
 
37
37
  };
38
38
 
39
- })(i)
39
+ })(i),
40
40
 
41
+ 3
42
+
41
- , 3);
43
+ );
42
44
 
43
45
  }
44
46
 

2

a

2016/04/14 02:10

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -38,7 +38,7 @@
38
38
 
39
39
  })(i)
40
40
 
41
- );
41
+ , 3);
42
42
 
43
43
  }
44
44
 

1

a

2016/04/14 02:09

投稿

mpyw
mpyw

スコア5223

test CHANGED
@@ -52,17 +52,13 @@
52
52
 
53
53
  ```JavaScript
54
54
 
55
- `use strict`;
55
+ 'use strict';
56
56
 
57
57
 
58
58
 
59
59
  for (let i = 0; i < 5; ++i) {
60
60
 
61
- setTimeout(function () {
61
+ setTimeout(() => console.log(i), 3);
62
-
63
- console.log(i);
64
-
65
- }, 3);
66
62
 
67
63
  }
68
64