처음에 일반적인 방법으로 아래의 코드와 같이 작성하였는데 ajax통신 success에서 console.log(i);로 찍어문 for문의 i 값이 0,1,2,3 순이 아니라 마지막 값만 찍혔다....
원인은...
ajax는 비동기 방식이라 for문 하고 같이 작동하는것이 아니라는 것이다. for문 따로, ajax 따로....
즉, ajax의 url에서 데이터를 받아 올 동안 for문은 이미 다 돌고 있다는 거였다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
for(var i = 0; i < addressArr.length; i++){
$.ajax({
type:'GET',
url: /* user url*/,
dataType : "jsonp",
async:false,
success:function(result){
console.log(i);
},
error: function(xhr,status,error){
console.log(xhr+status+error);
}
});
}
|
해결 방법...
stackoverflow에서 찾았다.
아래와 같이 사용 하면 된다고 한다.
|
1
2
3
4
5
6
7
|
for (var i .....) {
(function (i) {
async(function() {
use(i);
});
})(i);
}
|
위의 방법대로 적용한 결과는 아래와 같다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
for(var i = 0; i < addressArr.length; i++){
(function(i) {
$.ajax({
type:'GET',
url: /* user url*/,
dataType : "jsonp",
async:false,
success:function(result){
console.log(i);
},
error: function(xhr,status,error){
console.log(xhr+status+error);
}
});
})(i);
}
|
잘 돌아 간다.
'웹 프로그래밍' 카테고리의 다른 글
| 웹 게임(벽돌깨기-로그인, DB연동, MVC, JQuery) (0) | 2019.02.25 |
|---|