복붙노트

[JQUERY] 모든 jQuery를 Ajax 요청이 완료 될 때까지 기다립니다?

JQUERY

모든 jQuery를 Ajax 요청이 완료 될 때까지 기다립니다?

해결법

  1. 1.jQuery를 이제이 목적으로하는 경우 함수를 정의합니다.

    jQuery를 이제이 목적으로하는 경우 함수를 정의합니다.

    이 인수로 이연 객체의 수를 받아, 그들 모두가 해결 될 때 함수를 실행합니다.

    당신이 다음 네 아약스 요청 (예를 들어) 개시들이 완료되면 작업을 수행하려는 경우 수단은, 당신은 이런 식으로 뭔가를 할 수 :

    $.when(ajax1(), ajax2(), ajax3(), ajax4()).done(function(a1, a2, a3, a4){
    // the code here will be executed when all four ajax requests resolve.
    // a1, a2, a3 and a4 are lists of length 3 containing the response text,
    // status, and jqXHR object for each of the four ajax calls respectively.
});

function ajax1() {
    // NOTE:  This function must return the value 
    //        from calling the $.ajax() method.
    return $.ajax({
        url: "someUrl",
        dataType: "json",
        data:  yourJsonData,            
        ...
    });
}

    내 의견으로는, 그것은 깨끗하고 명확한 구문하게, 그리고 페이지가 개발로 원치 않는 부작용이있을 수 등 ajaxStart와 ajaxStop 같은 글로벌 변수를 포함 방지 할 수 있습니다.

    사전에 당신을 위해 기다릴 필요가 얼마나 많은 아약스 인수를 알 수없는 경우 (즉, 당신이 인수의 변수 번호를 사용하려면), 여전히 수행하지만, 단지 조금 까다 롭습니다 수 있습니다. ) $ .when (에 Deferreds의 배열에서 패스를 참조하십시오 (아마도 jQuery를 .when 문제 해결 인수의 변수 번호).

    당신이 등 아약스 스크립트의 실패 모드를 통해 더 깊은 제어가 필요한 경우 .when ()에 의해 반환 된 객체를 저장할 수 있습니다 - 원래 아약스 모든 쿼리를 아우르는 jQuery를 약속 개체입니다. 당신은 자세한 성공 / 실패 처리기를 추가하는 데에 () () 또는 .fail를 그 때는 호출 할 수 있습니다.

  2. 2.모든 아약스 요청 문서, 그들 중 얼마나 많은 상관없이 마무리 할 때 알고 싶은 경우에 존재하는, 단지 $ .ajaxStop 이벤트이 방법을 사용합니다 :

    모든 아약스 요청 문서, 그들 중 얼마나 많은 상관없이 마무리 할 때 알고 싶은 경우에 존재하는, 단지 $ .ajaxStop 이벤트이 방법을 사용합니다 :

    $(document).ajaxStop(function () {
  // 0 === $.active
});

    최신 정보: 당신이 ES 구문을 고수 할 경우에, 당신은 알려진 아약스 방법에 대한 Promise.all을 사용할 수 있습니다 :

    Promise.all([ajax1(), ajax2()]).then(() => {
  // all requests finished successfully
}).catch(() => {
  // all requests finished but one or more failed
})

    여기서 흥미로운 점은 약속과 $ 아약스 요청을 모두 작동한다는 것입니다.

    여기에 jsFiddle 데모입니다.

    업데이트 2 : 비동기 / await를 구문을 사용하지만 최신 버전 :

    try {
  const results = await Promise.all([ajax1(), ajax2()])
  // do other actions
} catch(ex) { }

  3. 3.나는 내가 찾던 정확히 gnarf 내 자신에 의해 좋은 답변을 발견 :)

    나는 내가 찾던 정확히 gnarf 내 자신에 의해 좋은 답변을 발견 :)

    jQuery를 ajaxQueue

    //This handles the queues    
(function($) {

  var ajaxQueue = $({});

  $.ajaxQueue = function(ajaxOpts) {

    var oldComplete = ajaxOpts.complete;

    ajaxQueue.queue(function(next) {

      ajaxOpts.complete = function() {
        if (oldComplete) oldComplete.apply(this, arguments);

        next();
      };

      $.ajax(ajaxOpts);
    });
  };

})(jQuery);

    그럼 당신은이 같은 큐에 아약스 요청을 추가 할 수 있습니다 :

    $.ajaxQueue({
        url: 'page.php',
        data: {id: 1},
        type: 'POST',
        success: function(data) {
            $('#status').html(data);
        }
    });

  4. 4.ajaxStop 이벤트를 사용합니다.

    ajaxStop 이벤트를 사용합니다.

    예를 들어,하자 100 개 아약스 요청을 가져 오는 동안 로딩 ... 메시지가 있다고 가정하고로드하면 당신은 숨기려면 해당 메시지를 원한다.

    JQuery와 문서에서 :

    $("#loading").ajaxStop(function() {
  $(this).hide();
});

    이 모든 아약스 요청을 해당 페이지에서 수행되는 것을 기다리는 것이 주를 수행합니다.

  5. 5.참고 : 위의 답변이 응답을 작성 당시에 존재하지 않는 기능을 사용합니다. 내가 대신 이러한 방법의 jQuery.when ()를 사용하는 것이 좋습니다,하지만 난 역사적 목적을 위해 대답을 떠날거야.

    참고 : 위의 답변이 응답을 작성 당시에 존재하지 않는 기능을 사용합니다. 내가 대신 이러한 방법의 jQuery.when ()를 사용하는 것이 좋습니다,하지만 난 역사적 목적을 위해 대답을 떠날거야.

    -

    당신이 구현하는 방법은 코드에 의존 할 것입니다하지만 당신은 아마, 간단한 계산 세마포어에 의해 얻을 수 있습니다. 간단한 예는 같은 것 ...

    var semaphore  = 0,     // counting semaphore for ajax requests
    all_queued = false; // bool indicator to account for instances where the first request might finish before the second even starts

semaphore++;
$.get('ajax/test1.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test2.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test3.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

semaphore++;
$.get('ajax/test4.html', function(data) {
    semaphore--;
    if (all_queued && semaphore === 0) {
        // process your custom stuff here
    }
});

// now that all ajax requests are queued up, switch the bool to indicate it
all_queued = true;

    당신이 {비동기 : 거짓}처럼 작동하고 싶었하지만 당신은 브라우저를 잠글하지 않았다, 당신은 jQuery를 큐와 같은 일을 수행 할 수있다.

    var $queue = $("<div/>");
$queue.queue(function(){
    $.get('ajax/test1.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test2.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test3.html', function(data) {
        $queue.dequeue();
    });
}).queue(function(){
    $.get('ajax/test4.html', function(data) {
        $queue.dequeue();
    });
});

  6. 6.기다리는해서는 안됩니다 있도록 자바 스크립트, 오히려 세트 후크 / 콜백 이벤트 기반

    기다리는해서는 안됩니다 있도록 자바 스크립트, 오히려 세트 후크 / 콜백 이벤트 기반

    당신은 아마 jquery.ajax의 성공 / 완전한 방법을 사용할 수 있습니다

    또는 당신은 .ajaxComplete을 사용할 수 있습니다 :

    $('.log').ajaxComplete(function(e, xhr, settings) {
  if (settings.url == 'ajax/test.html') {
    $(this).text('Triggered ajaxComplete handler.');
    //and you can do whatever other processing here, including calling another function...
  }
});

    당신이 당신 (들) 아약스 요청 (들) 방법의 의사를 게시해야하지만 더 정확하게하기 위해 호출 (있다) ...

  7. 7.약간의 해결 방법은 다음과 같이이다 :

    약간의 해결 방법은 다음과 같이이다 :

    // Define how many Ajax calls must be done
var ajaxCalls = 3;
var counter = 0;
var ajaxCallComplete = function() {
    counter++;
    if( counter >= ajaxCalls ) {
            // When all ajax calls has been done
        // Do something like hide waiting images, or any else function call
        $('*').css('cursor', 'auto');
    }
};

var loadPersons = function() {
        // Show waiting image, or something else
    $('*').css('cursor', 'wait');

    var url = global.ctx + '/loadPersons';
    $.getJSON(url, function(data) {
            // Fun things
    })
    .complete(function() { **ajaxCallComplete();** });
};

var loadCountries = function() {
    // Do things
    var url = global.ctx + '/loadCountries';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { **ajaxCallComplete();** });
};

var loadCities = function() {
    // Do things
    var url = global.ctx + '/loadCities';
    $.getJSON(url, function(data) {
            // Travels
    })
    .complete(function() { **ajaxCallComplete();** });
};

$(document).ready(function(){
    loadPersons();
    loadCountries();
    loadCities();
});

    희망은 유용 할 수 있습니다 ...

  8. 8.당신은 아약스 요청이 비동기 여부가 되길 원한다면 jQuery를 사용자가 지정 할 수 있습니다. 당신은 단순히 아약스 동기 요청을 할 수 있습니다 그들이 돌아올 때까지 다음 나머지 코드는 실행되지 않습니다.

    당신은 아약스 요청이 비동기 여부가 되길 원한다면 jQuery를 사용자가 지정 할 수 있습니다. 당신은 단순히 아약스 동기 요청을 할 수 있습니다 그들이 돌아올 때까지 다음 나머지 코드는 실행되지 않습니다.

    예를 들면 :

    jQuery.ajax({ 
    async: false,
    //code
});

  9. 9.당신이 뭔가 간단해야하는 경우; 한 번 완료 콜백

    당신이 뭔가 간단해야하는 경우; 한 번 완료 콜백

            //multiple ajax calls above
        var callback = function () {
            if ($.active !== 0) {
                setTimeout(callback, '500');
                return;
            }
            //whatever you need to do here
            //...
        };
        callback();

  10. 10.또한 당신은 async.js를 사용할 수 있습니다.

    또한 당신은 async.js를 사용할 수 있습니다.

    당신은 시간 제한과 같은 상자 밖으로 약속을 지원하지 않는 비동기 호출, SqlLite 등 통화뿐 아니라 아약스 요청의 모든 종류를 병합 할 수 있기 때문에 나는 그것의보다 나은 $ .when 생각합니다.

  11. 11.해당 세마포어 로직이 모든 아약스 호출에 확산되지 않도록 @BBonifield 응답에 기초하여, 나는 유틸리티 함수를 썼다.

    해당 세마포어 로직이 모든 아약스 호출에 확산되지 않도록 @BBonifield 응답에 기초하여, 나는 유틸리티 함수를 썼다.

    untilAjax 모든 ajaxCalls이 완료되면 콜백 함수를 호출하는 유틸리티 기능입니다.

    ajaxObjs는 AJAX 설정 오브젝트의 배열이다 http://api.jquery.com/jQuery.ajax/].

    FN은 콜백 함수입니다

    function untilAjax(ajaxObjs, fn) {
  if (!ajaxObjs || !fn) {
    return;
  }
  var ajaxCount = ajaxObjs.length,
    succ = null;

  for (var i = 0; i < ajaxObjs.length; i++) { //append logic to invoke callback function once all the ajax calls are completed, in success handler.
    succ = ajaxObjs[i]['success'];
    ajaxObjs[i]['success'] = function(data) { //modified success handler
      if (succ) {
        succ(data);
      }
      ajaxCount--;
      if (ajaxCount == 0) {
        fn(); //modify statement suitably if you want 'this' keyword to refer to another object
      }
    };
    $.ajax(ajaxObjs[i]); //make ajax call
    succ = null;
  };

    예 : 해봐요 untilAjax 함수를 사용한다.

    function doSomething() {
  // variable declarations
  untilAjax([{
    url: 'url2',
    dataType: 'json',
    success: function(data) {
      //do something with success data
    }
  }, {
    url: 'url1',
    dataType: 'json',
    success: function(data) {
      //do something with success data
    }
  }, {
    url: 'url2',
    dataType: 'json',
    success: function(response) {
      //do something with success data
    }
  }], function() {
    // logic after all the calls are completed.
  });
}

  12. 12.내가보기 엔 당신이 처음부터 시작하는 경우 $ .when ()를 사용하는 것이 좋습니다.

    내가보기 엔 당신이 처음부터 시작하는 경우 $ .when ()를 사용하는 것이 좋습니다.

    이 질문 만 이상의 답변을 가지고 있지만, 나는 아직도 내 경우에 유용 아무것도 찾지 못했습니다. 하자 이미 일부 아약스 호출을, 기존의 코드베이스를 처리해야하고 약속의 복잡성을 소개 및 / 또는 전체를 다시 실행하지 않으려는 말한다.

    우리는 쉽게 영원히 이후 jQuery를의 부분이되었습니다 jQuery를 .DATA, CSTE 연구진과 .trigger 기능을 활용할 수 있습니다.

    Codepen

    내 솔루션에 대한 좋은 물건입니다 :

    () {(기능 $ // 게시물에 대한 대기로드 할 triggerNowOrOnLoaded ( "게시물"함수 () { var에 $ 바디 = $ ( "몸"); var에 글 = $ body.data ( "게시물"); $ body.append ( "

    게시물 :"+ posts.length + ""); }); // 일부 아약스 요청 $ .getJSON ( "https://jsonplaceholder.typicode.com/posts"기능 (데이터) { $ ( "몸") 데이터 ( "게시물"데이터) .trigger ( "게시물."); }); 은`triggerNowOrOnLoaded`이 후 또는 실제 요청하기 전에 호출하면 // 문제가되지 않습니다 $ .getJSON ( "https://jsonplaceholder.typicode.com/users"기능 (데이터) { $ ( "몸") 데이터 ( "사용자", 데이터) .trigger ( "사용자").; }); // 두 종류의 대기 triggerNowOrOnLoaded ([ "포스트", "사용자", 함수 () { var에 $ 바디 = $ ( "몸"); var에 글 = $ body.data ( "게시물"); VAR 사용자 = $ body.data ( "사용자"); $ body.append ( "
    게시물 :"+ posts.length + "및 사용자 :"+ users.length + ""); }); // 모든 것이 이미로드 된 경우에도 작동합니다! 에서는 setTimeout (함수 () { 사용자가 이미로드 된 즉시 때문에 // 트리거 triggerNowOrOnLoaded ( "사용자"함수 () { var에 $ 바디 = $ ( "몸"); VAR 사용자 = $ body.data ( "사용자"); $ body.append ( "
    지연 사용자 :"+ users.length + ""); }); }, 2000); // 이초 }); // 도우미 함수 함수 triggerNowOrOnLoaded (유형, 콜백) { 유형 = $ .isArray (유형)? 타입 : 타입]; var에 $ 바디 = $ ( "몸"); VAR의 waitForTypes = []; , .each (유형 달러 기능 (I, 타입) { 경우 (대해서 typeof $ body.data (유형) === '정의되지 않은') { waitForTypes.push (타입); } }); VAR isDataReady waitForTypes.length === = 0; 경우 (isDataReady) { () 콜백; 반환; } // 마지막 유형에 대한 대기 및 유형의 나머지를 위해이 기능을 다시 실행 VAR WAITFOR waitForTypes.pop = (); $의 body.on (WAITFOR 함수 () { // 제거 이벤트 핸들러 - 우리는 단지 물건을 한 번 트리거합니다 $ body.off (WAITFOR); triggerNowOrOnLoaded (waitForTypes 콜백); }); } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 안녕하세요!

  13. 13.모든 아약스로드가 완료 때 크기 검사를 사용하고 있습니다

    모든 아약스로드가 완료 때 크기 검사를 사용하고 있습니다

    함수 get_ajax (링크 데이터 콜백) { {(아약스 $ URL : 링크, 입력 : "GET", 데이터 : 데이터, dataType와 "JSON" 성공 : 기능 (데이터, 상태 jqXHR) { 콜백 (jqXHR.status 데이터) }, 오류 : 함수 (jqXHR, 상태 ERR) { 콜백 (jqXHR.status, jqXHR); }, 완성 : 기능 (jqXHR, 상태) { } }) } 함수 run_list_ajax (콜백) { VAR 크기 = 0; VAR 최대 = 10; {(++ 인덱스; 색인 <최대 인덱스 = 0을하자)에 대한 VAR 링크 = 'http://api.jquery.com/ajaxStop/'; VAR 데이터 = {I : 인덱스} get_ajax (링크 데이터 기능 (상태, 데이터) { CONSOLE.LOG (인덱스) 경우 (크기> MAX-2) { 콜백 ( '다') } 크기 ++ }) } } run_list_ajax (기능 (정보) { CONSOLE.LOG (정보) }) <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">

  14. 14.알렉스의 대답에 확장하려면, 나는 변수 인수 및 약속과 예제를 가지고있다. 나는 아약스를 통해 이미지를로드하고 모든로드 된 후 페이지에 표시하고 싶었다.

    알렉스의 대답에 확장하려면, 나는 변수 인수 및 약속과 예제를 가지고있다. 나는 아약스를 통해 이미지를로드하고 모든로드 된 후 페이지에 표시하고 싶었다.

    이를 위해, 나는 다음을 사용 :

    let urlCreator = window.URL || window.webkitURL;

// Helper function for making ajax requests
let fetch = function(url) {
    return $.ajax({
        type: "get",
        xhrFields: {
            responseType: "blob"
        },
        url: url,
    });
};

// Map the array of urls to an array of ajax requests
let urls = ["https://placekitten.com/200/250", "https://placekitten.com/300/250"];
let files = urls.map(url => fetch(url));

// Use the spread operator to wait for all requests
$.when(...files).then(function() {
    // If we have multiple urls, then loop through
    if(urls.length > 1) {
        // Create image urls and tags for each result
        Array.from(arguments).forEach(data => {
            let imageUrl = urlCreator.createObjectURL(data[0]);
            let img = `<img src=${imageUrl}>`;
            $("#image_container").append(img);
        });
    }
    else {
        // Create image source and tag for result
        let imageUrl = urlCreator.createObjectURL(arguments[0]);
        let img = `<img src=${imageUrl}>`;
        $("#image_container").append(img);
    }
});

    하나 하나 또는 여러 개의 URL에 대한 작동하도록 업데이트 : https://jsfiddle.net/euypj5w9/

  15. 15.다른 답변은 당신이 ajaxStop을 사용할 수 있습니다 언급 한 바와 같이 모든 Ajax 요청이 완료 될 때까지 () 대기.

    다른 답변은 당신이 ajaxStop을 사용할 수 있습니다 언급 한 바와 같이 모든 Ajax 요청이 완료 될 때까지 () 대기.

    $(document).ajaxStop(function() {
     // This function will be triggered every time any ajax request is requested and completed
});

    당신이) 특정 아약스 (위해 그것을 원하는 최선을 요청하는 경우 당신은이 특정 아약스 요청 안에 완료 () 메소드를 사용하여 수행 할 수 있습니다

    $.ajax({
    type: "POST",
    url: "someUrl",
    success: function(data) {
        // This function will be triggered when ajax returns a 200 status code (success)
    },
    complete: function() {
        // This function will be triggered always, when ajax request is completed, even it fails/returns other status code
    },
    error: function() {
        // This will be triggered when ajax request fail.
    }
});

    당신은 몇 가지 특정 아약스 요청 만 기다릴 필요하지만, 할 수? 작업이 완료 기다려야 할이 아약스 때까지 기다려야 멋진 자바 스크립트의 약속을 사용합니다. 나는 아약스와의 약속 작업을 수행하는 방법을 보여주는 곧, 쉽게 읽을 수있는 예를했다. 다음 예를 살펴 보시기 바랍니다. 나는 예를 명확히에서는 setTimeout을 사용했다.

    // 노트: 해결로 // 결의는 () 약속을 표시하는 데 사용됩니다 // 거부로 약속을 표시하는 데 사용됩니다 () 거부 $ (문서) .ready (함수 () { $ ( "버튼"). (함수를 "클릭"에 () { var에 ajax1가) 거부, 새로운 약속 ((해결을 = => { {(아약스 $ 입력 : "GET", URL : "https://miro.medium.com/max/1200/0*UEtwA2ask7vQYW06.png" xhrFields : {responseType : '방울'} 성공 : 기능 (데이터) { 에서는 setTimeout (함수 () { $ ( '# image1이라는') ATTR ( "SRC", window.URL.createObjectURL (데이터)).; 해결 ( "약속 ajax1 해결"); } 1000); }, 오류 : 함수 () { ( "약속 ajax1 거부") 거부; }, }); }); var에 ajax2가) 거부, 새로운 약속 ((해결을 = => { {(아약스 $ 입력 : "GET", URL : "https://cdn1.iconfinder.com/data/icons/social-media-vol-1-1/24/_github-512.png" xhrFields : {responseType : '방울'} 성공 : 기능 (데이터) { 에서는 setTimeout (함수 () { $ ( '#의 이미지 2') ATTR ( "SRC", window.URL.createObjectURL (데이터)).; 해결 ( "약속 ajax2 해결"); }, 1500); }, 오류 : 함수 () { ( "약속 ajax2 거부") 거부; }, }); }); var에 ajax3가) 거부, 새로운 약속 ((해결을 = => { {(아약스 $ 입력 : "GET", URL : "https://miro.medium.com/max/632/1*LUfpOf7teWvPdIPTBmYciA.png" xhrFields : {responseType : '방울'} 성공 : 기능 (데이터) { 에서는 setTimeout (함수 () { $ ( '#의 이미지 3') ATTR ( "SRC", window.URL.createObjectURL (데이터)).; 해결 ( "약속 ajax3 해결"); }, 2000); }, 오류 : 함수 () { ( "약속 ajax3 거부") 거부; }, }); }); Promise.all ([ajax1, ajax2, ajax3). 다음 (값 => { CONSOLE.LOG는 ( "아약스가 종료 될 때까지 우리는 기다렸다 :"+ 값); CONSOLE.LOG는 ( "내 몇 아약스는 몇 가지 작업을 수행 할 수 있습니다 끝났다!") } 이유 => { CONSOLE.LOG는 ( "약속 실패 :"+ 이유) }); 당신이 그 (것)들을 위해 대기를 원하는 경우 // 또는 개별적으로 다음과 같이 그것을 할 // ajax1.then (값 => { //을 console.log ( "약속 하나가 해결 :"+ 값) } // 이유 => { //을 console.log ( "약속 한 실패 :"+ 이유) //}); }); }); IMG { 최대 폭 : 200 픽셀; 최대 높이 : 100 픽셀; } <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <버튼> 만들기 AJAX 요청

  16. 16.나는 그것이 변화를 이용하여 간단한 방법을 발견 ()

    나는 그것이 변화를 이용하여 간단한 방법을 발견 ()

    function waitReq(id)
{
  jQuery.ajax(
  {
    type: 'POST',
    url: ajaxurl,
    data:
    {
      "page": id
    },
    success: function(resp)
    {
      ...........
      // check array length if not "0" continue to use next array value
      if(ids.length)
      {
        waitReq(ids.shift()); // 2
      )
    },
    error: function(resp)
    {
      ....................
      if(ids.length)
      {
        waitReq(ids.shift());
      )
    }
  });
}

var ids = [1, 2, 3, 4, 5];    
// shift() = delete first array value (then print)
waitReq(ids.shift()); // print 1

  17. 17.다음과 같이 내 솔루션입니다

    다음과 같이 내 솔루션입니다

    var request;
...
'services': {
  'GetAddressBookData': function() {
    //This is the primary service that loads all addressbook records 
    request = $.ajax({
      type: "POST",
      url: "Default.aspx/GetAddressBook",
      contentType: "application/json;",
      dataType: "json"
    });
  },

  ...

  'apps': {
    'AddressBook': {
      'data': "",
      'Start': function() {
          ...services.GetAddressBookData();
          request.done(function(response) {
            trace("ajax successful");
            ..apps.AddressBook.data = response['d'];
            ...apps.AddressBook.Filter();
          });
          request.fail(function(xhr, textStatus, errorThrown) {
            trace("ajax failed - " + errorThrown);
          });

    아주 능숙하게 일했다. 나는이 일을 다른 방법을 많이 시도했습니다,하지만 난이 가장 간단하고 재사용 가능한 것으로 판명. 희망이 도움이

  18. 18.내 솔루션 봐 :

    내 솔루션 봐 :

    당신의 자바 스크립트 파일에이 기능 (변수)를 1.Insert :

    var runFunctionQueue_callback;

function runFunctionQueue(f, index, callback) {

  var next_index = index + 1

  if (callback !== undefined) runFunctionQueue_callback = callback;

  if (f[next_index] !== undefined) {
    console.log(index + ' Next function avalaible -> ' + next_index);
    $.ajax({
      type: 'GET',
      url: f[index].file,
      data: (f[index].data),
      complete: function() {
        runFunctionQueue(f, next_index);
      }
    });
  } else {
    console.log(index + ' Last function');
    $.ajax({
      type: 'GET',
      url: f[index].file,
      data: (f[index].data),
      async: false,
      complete: runFunctionQueue_callback
    });
  }
}

    이 같은 귀하의 요청과 배열을 2.Build :

    var f = [
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}},
           {file: 'file_path', data: {action: 'action', data: 'any_data}}
        ];

    3.Create 콜백 기능 :

    function Function_callback() {
  alert('done');
}

    파라미터로 runFunctionQueue 기능 4.Call :

    runFunctionQueue(f, 0, QuestionInsert_callback);
// first parameter: array with requests data
// second parameter: start from first request
// third parameter: the callback function

  19. 19.여기에 설명 된대로 $ .when 나를 위해 일을하지 않는, 콜백 (x)를 대신 수익률은 근무 X : https://stackoverflow.com/a/13455253/10357604

    여기에 설명 된대로 $ .when 나를 위해 일을하지 않는, 콜백 (x)를 대신 수익률은 근무 X : https://stackoverflow.com/a/13455253/10357604

  20. 20.이 방법을 사용해보십시오. 아약스 호출이 완료 될 때까지 자바 스크립트 함수 내부 루프가 대기 할 수 있습니다.

    이 방법을 사용해보십시오. 아약스 호출이 완료 될 때까지 자바 스크립트 함수 내부 루프가 대기 할 수 있습니다.

    function getLabelById(id)
{
    var label = '';
    var done = false;
    $.ajax({
       cache: false,
       url: "YourMvcActionUrl",
       type: "GET",
       dataType: "json",
       async: false,
       error: function (result) {
         label='undefined';
         done = true;
        },
       success: function (result) {
            label = result.Message;
            done = true;
        }
     });

   //A loop to check done if ajax call is done.
   while (!done)
   {
      setTimeout(function(){ },500); // take a sleep.
   }

    return label;
}

    21. from https://stackoverflow.com/questions/3709597/wait-until-all-jquery-ajax-requests-are-done by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] HTML은 텍스트 입력은 숫자 만 입력 가능  (0) 2020.09.22
[JQUERY] 직접 대 위임 -의 jQuery CSTE 연구진은 ()  (0) 2020.09.22
[JQUERY] 이벤트 핸들러가 동적 콘텐츠에 작동하지 않습니다 [중복]  (0) 2020.09.22
[JQUERY] 파일에서 실행중인 응용 프로그램에 의해 만들어진 요청에 대한 오류 "원점 널 (null)는 액세스 제어 - 허용 - 원산지에 의해 허용되지 않습니다": // URL  (0) 2020.09.22
[JQUERY] 어떻게 자바 스크립트, JQuery와 - 아약스를 사용하여 <입력 유형 = '파일'>의 변화에 ​​선택한 파일의 전체 경로를 얻으려면?  (0) 2020.09.22
,

티스토리툴바