回答編集履歴
1
追加
answer
CHANGED
@@ -1,5 +1,6 @@
|
|
1
|
+
# 1
|
1
2
|

|
2
|
-
[
|
3
|
+
[アニメーションGIF](https://teratail.storage.googleapis.com/uploads/contributed_images/169890ce9946de02b6a79a1a6c154683.gif)
|
3
4
|
|
4
5
|
```JavaScript
|
5
6
|
|
@@ -75,4 +76,73 @@
|
|
75
76
|
getFile("5.txt");
|
76
77
|
|
77
78
|
|
79
|
+
```
|
80
|
+
|
81
|
+
#2
|
82
|
+

|
83
|
+
[アニメーションGIF](https://teratail.storage.googleapis.com/uploads/contributed_images/350cb20d5f1b095dabc37153f4e3e8db.gif)
|
84
|
+
```
|
85
|
+
|
86
|
+
const fakeAjax = (fileName, callback) => {
|
87
|
+
const MAX = 5000;
|
88
|
+
const MIN = 1000;
|
89
|
+
const delay = Math.floor(Math.random() * (MAX - MIN) + MIN);
|
90
|
+
|
91
|
+
const responseMockData = {
|
92
|
+
"1.txt": "1st request",
|
93
|
+
"2.txt": "2nd request",
|
94
|
+
"3.txt": "3rd request",
|
95
|
+
"4.txt": "4th request",
|
96
|
+
"5.txt": "5th request"
|
97
|
+
};
|
98
|
+
|
99
|
+
setTimeout(() => {
|
100
|
+
callback(responseMockData[fileName]);
|
101
|
+
}, delay);
|
102
|
+
}
|
103
|
+
|
104
|
+
const output = console.log.bind(this);
|
105
|
+
|
106
|
+
const getFile = (fileName) => {
|
107
|
+
let memoizedResult;
|
108
|
+
let memoizedCallback;
|
109
|
+
|
110
|
+
fakeAjax(fileName, (response) => {
|
111
|
+
if (memoizedCallback) {
|
112
|
+
return memoizedCallback(response);
|
113
|
+
}
|
114
|
+
memoizedResult = response;
|
115
|
+
});
|
116
|
+
|
117
|
+
return (callback) => {
|
118
|
+
if (memoizedResult) {
|
119
|
+
return callback(memoizedResult);
|
120
|
+
}
|
121
|
+
memoizedCallback = callback;
|
122
|
+
};
|
123
|
+
}
|
124
|
+
|
125
|
+
const getFile1 = getFile('1.txt');
|
126
|
+
const getFile2 = getFile('2.txt');
|
127
|
+
const getFile3 = getFile('3.txt');
|
128
|
+
const getFile4 = getFile('4.txt');
|
129
|
+
const getFile5 = getFile('5.txt');
|
130
|
+
|
131
|
+
|
132
|
+
getFile1(resultForFile1 => {
|
133
|
+
output(resultForFile1);
|
134
|
+
getFile2(resultForFile2 => {
|
135
|
+
output(resultForFile2);
|
136
|
+
getFile3(resultForFile3 => {
|
137
|
+
output(resultForFile3);
|
138
|
+
getFile4(resultForFile4 => {
|
139
|
+
output(resultForFile4);
|
140
|
+
getFile5(resultForFile5 => {
|
141
|
+
output(resultForFile5);
|
142
|
+
output('all done!');
|
143
|
+
})
|
144
|
+
})
|
145
|
+
})
|
146
|
+
})
|
147
|
+
})
|
78
148
|
```
|