jQuery AJAX 루프 호출

jQuery AJAX 루프 호출

이 질문에는 이미 다음과 같은 답이 있습니다.

루프 내부의 JavaScript 폐쇄 – 단순한 실용적인 예 (45개 답변)

마감됨9년 전에.

저는 AJAX를 사용하는 것이 처음이고, 페이지에 있는 많은 링크를 처리하고 각 링크에 대해 AJAX를 호출하는 사용자 스크립트를 작성하고 있습니다.

for (var i = 0; i < linkList.length; i++)
{
    $.ajax({
        url: linkList[i].getAttribute("href"),
        cache: false
    }).done(function( html )
    {
        var hasAppended = false;
        if (html.indexOf('someStringOnGottenPage') != -1 && !hasAppended)
        {
            hasAppended = true;
            var id = linkList[i].getAttribute("href").substring(linkList[i].getAttribute("href").indexOf('='));
            $( "#links a[href*='" + id + "']" ).append(' THIS PAGE CONTAINS SPECIFIED DATA');
        }
    });
}

간단히 말하면, 저는 링크 목록이 있는 페이지를 가지고 있습니다.저는 링크를 통해 반복하고 AJAX가 각 링크 페이지의 내용을 처리하도록 하고, 해당 페이지에 지정된 내용이 포함되어 있으면 다시 보고하기를 원합니다.

제가 안고 있는 문제는 linkList를 통해 반복하는 데 사용되는 [i]의 값이 항상 6이며 절대 그러면 안 된다는 것입니다..done이 마지막으로 트리거할 때 AJAX가 처음 트리거한 값의 [i] 값을 알고 나중에 .done이 트리거할 때의 [i] 값을 알 수 있도록 데이터를 전달해야 합니다.

AJAX를 처음 호출할 때 .done이 [i] 값이라는 것을 어떻게 알 수 있습니까?

가장 쉬운 방법은 클로저를 사용하는 것입니다.루프에 비동기적인 것이 있을 때마다 같은 것입니다.

for (var i .....) {
  asynchronousFunction(function() {
    use(i);
  }
}

이 유사 코드 스니펫에서 내부 함수는 다음에 의해 참조된 저장 위치를 캡처합니다.i루프가 실행되고,i최종 값으로 증가한 다음 비동기 콜백이 호출되기 시작하고, 모두 동일한 위치(값이 아님)를 검색합니다.

일반적인 솔루션은 다음과 같습니다.

for (var i .....) {
  (function (i) {
    asynchronousFunction(function() {
      use(i);
    });
  })(i);
}

즉, 루프의 전체 내용을 자동 압축 기능으로 감쌉니다.

여기서, 외부의 값은i래핑 자체 검색 익명 함수로 전달됩니다. 이 고유한 값의 위치는 비동기 콜백에 의해 캡처됩니다.이러한 방식으로 각 비동기는 자체 실행 기능이 호출되는 순간에 결정되는 자체 값을 얻습니다.

질문의 댓글 섹션에 있는 링크를 통해 코드에 어떤 문제가 있는지 알 수 있습니다.하지만 거기서 설명한 것보다 더 나은 해결책을 찾을 수 있습니다.

전달된 콜백이 각 반복에 대해 별도의 폐쇄를 생성할 수 있도록 목록을 통해 반복하려면 $.each()를 사용하십시오.

$.each(linkList, function (i, item) {
    $.ajax({
        url: item.getAttribute("href"),
        cache: false
    }).done(function (html) {
        var hasAppended = false;
        if (html.indexOf('someStringOnGottenPage') != -1 && !hasAppended) {
            hasAppended = true;
            var id = item.getAttribute("href").substring(item.getAttribute("href").indexOf('='));
            $("#links a[href*='" + id + "']").append(' THIS PAGE CONTAINS SPECIFIED DATA');
        }
    });
})

---

jQuery 개체인 경우 .each()를 사용합니다.

linkList.each(function (i, item) {
    var $item = $(item),
        href = $item.attr("href");
    $.ajax({
        url: href,
        cache: false
    }).done(function (html) {
        var hasAppended = false;
        if (html.indexOf('someStringOnGottenPage') != -1 && !hasAppended) {
            hasAppended = true;
            var id = href.substring(href.indexOf('='));
            $("#links a[href*='" + id + "']").append(' THIS PAGE CONTAINS SPECIFIED DATA');
        }
    });
})

언급URL : https://stackoverflow.com/questions/21819905/jquery-ajax-calls-in-for-loop