jQuery callback สำหรับการโทร ajax หลายครั้ง

ฉันต้องการโทร ajax สามครั้งในเหตุการณ์คลิก การโทรของ ajax แต่ละครั้งจะดำเนินการที่แตกต่างกันและส่งกลับข้อมูลที่จำเป็นสำหรับการโทรกลับครั้งสุดท้าย การโทรกลับไม่ได้ขึ้นอยู่กับกันและกันพวกเขาสามารถไปพร้อมกันได้อย่างไรก็ตามฉันต้องการให้โทรกลับครั้งสุดท้ายเมื่อทั้งสามเสร็จสมบูรณ์

$('#button').click(function() {
    fun1();
    fun2();
    fun3();
//now do something else when the requests have done their 'success' callbacks.
});

var fun1= (function() {
    $.ajax({/*code*/});
});
var fun2 = (function() {
    $.ajax({/*code*/});
});
var fun3 = (function() {
    $.ajax({/*code*/});
});

นี่คือวัตถุเรียกกลับที่ฉันเขียนไว้ซึ่งคุณสามารถตั้งค่าการโทรกลับครั้งเดียวให้เริ่มทำงานเมื่อเสร็จสิ้นทั้งหมดหรือปล่อยให้แต่ละครั้งมีการโทรกลับของตัวเองและเริ่มการทำงานทั้งหมดเมื่อเสร็จสมบูรณ์:

ประกาศ

เนื่องจาก jQuery 1.5+ คุณสามารถใช้วิธีการรอการตัดบัญชีตามที่อธิบายไว้ในคำตอบอื่น:

  $.when($.ajax(), [...]).then(function(results){},[...]);

ตัวอย่างการรอตัดบัญชีที่นี่

สำหรับ jQuery <1.5 สิ่งต่อไปนี้จะใช้งานได้หรือหากคุณต้องการให้การโทร ajax ของคุณเริ่มทำงานในเวลาที่ไม่รู้จักดังที่แสดงไว้ที่นี่ด้วยปุ่มสองปุ่ม: เริ่มทำงานหลังจากคลิกทั้งสองปุ่ม

[การใช้งาน]

สำหรับเดียวโทรกลับเมื่อเสร็จ: ตัวอย่างการทำงาน

// initialize here
var requestCallback = new MyRequestsCompleted({
    numRequest: 3,
    singleCallback: function(){
        alert( "I'm the callback");
    }
});

//usage in request
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.requestComplete(true);
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.requestComplete(true);
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.requestComplete(true);
    }
});

แต่ละคนมีการโทรกลับของตนเองเมื่อทุกอย่างเสร็จสมบูรณ์: ตัวอย่างการทำงาน

//initialize 
var requestCallback = new MyRequestsCompleted({
    numRequest: 3
});

//usage in request
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the first callback');
        });
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the second callback');
        });
    }
});
$.ajax({
    url: '/echo/html/',
    success: function(data) {
        requestCallback.addCallbackToQueue(true, function() {
            alert('Im the third callback');
        });
    }
});

[รหัส]

var MyRequestsCompleted = (function() {
    var numRequestToComplete, requestsCompleted, callBacks, singleCallBack;

    return function(options) {
        if (!options) options = {};

        numRequestToComplete = options.numRequest || 0;
        requestsCompleted = options.requestsCompleted || 0;
        callBacks = [];
        var fireCallbacks = function() {
            alert("we're all complete");
            for (var i = 0; i < callBacks.length; i++) callBacks[i]();
        };
        if (options.singleCallback) callBacks.push(options.singleCallback);

        this.addCallbackToQueue = function(isComplete, callback) {
            if (isComplete) requestsCompleted++;
            if (callback) callBacks.push(callback);
            if (requestsCompleted == numRequestToComplete) fireCallbacks();
        };
        this.requestComplete = function(isComplete) {
            if (isComplete) requestsCompleted++;
            if (requestsCompleted == numRequestToComplete) fireCallbacks();
        };
        this.setCallback = function(callback) {
            callBacks.push(callBack);
        };
    };
})();

ดูเหมือนว่าคุณจะมีคำตอบสำหรับสิ่งนี้ แต่ฉันคิดว่ามีบางสิ่งที่ควรค่าแก่การกล่าวถึงที่นี่ซึ่งจะทำให้โค้ดของคุณง่ายขึ้นอย่างมาก jQuery เปิดตัว$.whenใน v1.5 ดูเหมือนว่า:

$.when($.ajax(...), $.ajax(...)).then(function (resp1, resp2) {
    //this callback will be fired once all ajax calls have finished.
});

ไม่เห็นมันกล่าวถึงที่นี่หวังว่ามันจะช่วยได้

ไม่เห็นความจำเป็นในการทำร้ายตัวเอง Simple มีตัวแปรซึ่งเป็นจำนวนเต็ม เมื่อคุณเริ่มคำขอให้เพิ่มจำนวน เมื่อเสร็จสมบูรณ์ให้ลดลง เมื่อเป็นศูนย์ไม่มีคำขอใด ๆ ที่อยู่ระหว่างดำเนินการคุณก็ทำเสร็จแล้ว

$('#button').click(function() {
    var inProgress = 0;

    function handleBefore() {
        inProgress++;
    };

    function handleComplete() {
        if (!--inProgress) {
            // do what's in here when all requests have completed.
        }
    };

    $.ajax({
        beforeSend: handleBefore,
        complete: function () {
            // whatever
            handleComplete();
            // whatever
        }
    });
    $.ajax({
        beforeSend: handleBefore,
        complete: function () {
            // whatever
            handleComplete();
            // whatever
        }
    });
    $.ajax({
        beforeSend: handleBefore,
        complete: function () {
            // whatever
            handleComplete();
            // whatever
        }
    });
});

เป็นที่น่าสังเกตว่าเนื่องจาก$.whenคาดว่าคำขอ ajax ทั้งหมดจะเป็นอาร์กิวเมนต์ตามลำดับ (ไม่ใช่อาร์เรย์) ที่คุณมักจะเห็นว่า$.whenใช้.apply()ดังนี้:

// Save all requests in an array of jqXHR objects
var requests = arrayOfThings.map(function(thing) {
    return $.ajax({
        method: 'GET',
        url: 'thing/' + thing.id
    });
});

$.when.apply(this, requests).then(function(resp1, resp2/*, ... */) {
    // Each argument is an array with the following structure: [ data, statusText, jqXHR ]
    var responseArgsArray = Array.prototype.slice.call(this, arguments);

});

เมื่อใช้ไวยากรณ์ Spreadคุณสามารถเขียนโค้ดนี้ได้ดังนี้:

$.when(...requests).then((...responses) => {
    // do something with responses
})

เนื่องจาก$.whenยอมรับ args เช่นนี้

$.when(ajaxRequest1, ajaxRequest2, ajaxRequest3);

และไม่ใช่แบบนี้:

$.when([ajaxRequest1, ajaxRequest2, ajaxRequest3]);

ฉันชอบความคิดของ hvgotcodes ข้อเสนอแนะของฉันคือการเพิ่มตัวเพิ่มทั่วไปที่เปรียบเทียบตัวเลขที่สมบูรณ์กับหมายเลขที่ต้องการจากนั้นเรียกใช้การโทรกลับครั้งสุดท้าย สิ่งนี้สามารถสร้างไว้ในการโทรกลับครั้งสุดท้าย

var sync = {
 callbacksToComplete = 3,
 callbacksCompleted = 0,
 addCallbackInstance = function(){
  this.callbacksCompleted++;
  if(callbacksCompleted == callbacksToComplete) {
   doFinalCallBack();
  }
 }
};

[แก้ไขเพื่อแสดงการอัปเดตชื่อ]

แก้ไข - บางทีตัวเลือกที่ดีที่สุดคือการสร้างจุดสิ้นสุดบริการที่ทำทุกอย่างที่คำขอทั้งสามทำ ด้วยวิธีนี้คุณจะต้องดำเนินการตามคำขอเพียงครั้งเดียวและข้อมูลทั้งหมดจะอยู่ที่ที่คุณต้องการเพื่อตอบสนอง หากคุณพบว่าคุณทำ 3 คำขอเดิมซ้ำแล้วซ้ำเล่าคุณอาจต้องการไปเส้นทางนี้ มักจะเป็นการตัดสินใจที่ดีในการตั้งค่าบริการส่วนหน้าบนเซิร์ฟเวอร์ที่มักใช้การทำงานของเซิร์ฟเวอร์ขนาดเล็กร่วมกัน เพียงแค่ความคิด

วิธีหนึ่งที่จะทำได้คือการสร้างวัตถุ 'ซิงค์' ในตัวจัดการการคลิกของคุณก่อนที่จะเรียก ajax สิ่งที่ต้องการ

var sync = {
   count: 0
}

การซิงค์จะถูกผูกไว้กับขอบเขตของการโทรที่ประสบความสำเร็จโดยอัตโนมัติ (การปิด) ในตัวจัดการความสำเร็จคุณจะเพิ่มจำนวนและถ้าเป็น 3 คุณสามารถเรียกใช้ฟังก์ชันอื่นได้

หรือคุณสามารถทำสิ่งต่างๆเช่น

var sync = {
   success1Complete: false,
   ...
   success3Complete: false,
}

เมื่อดำเนินการสำเร็จแต่ละครั้งก็จะเปลี่ยนค่าในการซิงค์เป็นจริง คุณจะต้องตรวจสอบการซิงค์เพื่อให้แน่ใจว่าทั้งสามเป็นจริงก่อนที่จะดำเนินการต่อ

สังเกตกรณีที่ xhrs ตัวใดตัวหนึ่งของคุณไม่ส่งคืนความสำเร็จ - คุณต้องคำนึงถึงสิ่งนั้น

อีกทางเลือกหนึ่งคือเรียกใช้ฟังก์ชันสุดท้ายในตัวจัดการความสำเร็จของคุณเสมอและให้มันเข้าถึงตัวเลือกการซิงค์เพื่อพิจารณาว่าจะทำอะไรจริงหรือไม่ คุณจะต้องตรวจสอบให้แน่ใจว่าการซิงค์อยู่ในขอบเขตของฟังก์ชันนั้น

ฉันพบวิธีที่ง่ายกว่านี้โดยไม่ต้องใช้วิธีพิเศษในการจัดคิว

JS

$.ajax({
  type: 'POST',
  url: 'ajax1.php',
  data:{
    id: 1,
    cb:'method1'//declaration of callback method of ajax1.php
  },
  success: function(data){
  //catching up values
  var data = JSON.parse(data);
  var cb=data[0].cb;//here whe catching up the callback 'method1'
  eval(cb+"(JSON.stringify(data));");//here we calling method1 and pass all data
  }
});


$.ajax({
  type: 'POST',
  url: 'ajax2.php',
  data:{
    id: 2,
    cb:'method2'//declaration of callback method of ajax2.php
  },
  success: function(data){
  //catching up values
  var data = JSON.parse(data);
  var cb=data[0].cb;//here whe catching up the callback 'method2'
  eval(cb+"(JSON.stringify(data));");//here we calling method2 and pass all data
  }
});


//the callback methods
function method1(data){
//here we have our data from ajax1.php
alert("method1 called with data="+data);
//doing stuff we would only do in method1
//..
}

function method2(data){
//here we have our data from ajax2.php
alert("method2 called with data="+data);
//doing stuff we would only do in method2
//..
}

PHP (ajax1.php)

<?php
    //catch up callbackmethod
    $cb=$_POST['cb'];//is 'method1'

    $json[] = array(
    "cb" => $cb,
    "value" => "ajax1"
    );      

    //encoding array in JSON format
    echo json_encode($json);
?>

PHP (ajax2.php)

<?php
    //catch up callbackmethod
    $cb=$_POST['cb'];//is 'method2'

    $json[] = array(
    "cb" => $cb,
    "value" => "ajax2"
    );      

    //encoding array in JSON format
    echo json_encode($json);
?>

ฉันถามคำถามเดียวกันเมื่อไม่นานมานี้และได้รับคำตอบที่ดีสองสามข้อที่นี่: วิธีที่ดีที่สุดในการเพิ่ม 'การโทรกลับ' หลังจากการโทร XHR แบบอะซิงโครนัส

ฉันได้รับคำแนะนำที่ดีจากคำตอบในหน้านี้ ฉันปรับให้เหมาะกับการใช้งานเล็กน้อยและคิดว่าสามารถแบ่งปันได้

// lets say we have 2 ajax functions that needs to be "synchronized". 
// In other words, we want to know when both are completed.
function foo1(callback) {
    $.ajax({
        url: '/echo/html/',
        success: function(data) {
            alert('foo1');
            callback();               
        }
    });
}

function foo2(callback) {
    $.ajax({
        url: '/echo/html/',
        success: function(data) {
            alert('foo2');
            callback();
        }
    });
}

// here is my simplified solution
ajaxSynchronizer = function() {
    var funcs = [];
    var funcsCompleted = 0;
    var callback;

    this.add = function(f) {
        funcs.push(f);
    }

    this.synchronizer = function() {
        funcsCompleted++;
        if (funcsCompleted == funcs.length) {
            callback.call(this);
        }
    }

    this.callWhenFinished = function(cb) {
        callback = cb;
        for (var i = 0; i < funcs.length; i++) {
            funcs[i].call(this, this.synchronizer);
        }
    }
}

// this is the function that is called when both ajax calls are completed.
afterFunction = function() {
    alert('All done!');
}

// this is how you set it up
var synchronizer = new ajaxSynchronizer();
synchronizer.add(foo1);
synchronizer.add(foo2);
synchronizer.callWhenFinished(afterFunction);

มีข้อ จำกัด บางอย่างที่นี่ แต่สำหรับกรณีของฉันมันก็โอเค ฉันยังพบว่าสำหรับสิ่งที่ก้าวหน้ากว่านั้นยังมีปลั๊กอิน AOP (สำหรับ jQuery) ที่อาจมีประโยชน์: http://code.google.com/p/jquery-aop/

วันนี้ฉันเจอปัญหานี้และนี่เป็นความพยายามที่ไร้เดียงสาของฉันก่อนที่จะดูคำตอบที่ยอมรับ

<script>
    function main() {
        var a, b, c
        var one = function() {
            if ( a != undefined  && b != undefined && c != undefined ) {
                alert("Ok")
            } else {
                alert( "¬¬ ")
            }
        }

        fakeAjaxCall( function() {
            a = "two"
            one()
        } )
        fakeAjaxCall( function() {
            b = "three"
            one()
        } )
        fakeAjaxCall( function() {
            c = "four"
            one()
        } )
    }
    function fakeAjaxCall( a ) {
        a()
    }
    main()
</script>

ไม่ใช่ jquery (และดูเหมือนว่า jquery มีโซลูชันที่ใช้งานได้) แต่เป็นอีกทางเลือกหนึ่ง ...

ฉันมีปัญหาคล้ายกันในการทำงานอย่างหนักกับบริการบนเว็บของ SharePoint คุณมักจะต้องดึงข้อมูลจากหลายแหล่งเพื่อสร้างอินพุตสำหรับกระบวนการเดียว

เพื่อแก้ปัญหานี้ฉันฝังฟังก์ชันประเภทนี้ไว้ในไลบรารีนามธรรม AJAX ของฉัน คุณสามารถกำหนดคำขอได้อย่างง่ายดายซึ่งจะทริกเกอร์ชุดตัวจัดการเมื่อเสร็จสมบูรณ์ อย่างไรก็ตามแต่ละคำขอสามารถกำหนดได้ด้วยการเรียก http หลายรายการ นี่คือส่วนประกอบ (และเอกสารโดยละเอียด):

DPAJAX ที่ DepressedPress.com

ตัวอย่างง่ายๆนี้สร้างหนึ่งคำขอโดยมีการเรียกสามครั้งจากนั้นส่งข้อมูลนั้นตามลำดับการโทรไปยังตัวจัดการเดียว:

    // The handler function 
function AddUp(Nums) { alert(Nums[1] + Nums[2] + Nums[3]) }; 

    // Create the pool 
myPool = DP_AJAX.createPool(); 

    // Create the request 
myRequest = DP_AJAX.createRequest(AddUp); 

    // Add the calls to the request 
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [5,10]); 
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [4,6]); 
myRequest.addCall("GET", "http://www.mysite.com/Add.htm", [7,13]); 

    // Add the request to the pool 
myPool.addRequest(myRequest); 

โปรดทราบว่าไม่เหมือนกับโซลูชันอื่น ๆ (รวมถึงฉันเชื่อว่าโซลูชัน "เมื่อ" ใน jquery) หากวิธีนี้ไม่บังคับให้มีการโทรแบบเธรดเดียว - แต่ละรายการจะยังคงทำงานได้เร็ว (หรือช้าที่สุด) ตามที่สภาพแวดล้อมอนุญาต แต่ตัวจัดการเดียวจะถูกเรียกก็ต่อเมื่อทั้งหมดเสร็จสมบูรณ์ นอกจากนี้ยังรองรับการตั้งค่าการหมดเวลาและลองใหม่อีกครั้งหากบริการของคุณมีปัญหาเล็กน้อย

ฉันพบว่ามันมีประโยชน์อย่างมาก (และเข้าใจง่ายอย่างไม่น่าเชื่อจากมุมมองของโค้ด) ไม่มีการผูกมัดอีกต่อไปไม่ต้องนับการโทรและบันทึกเอาต์พุตอีกต่อไป เพียงแค่ "ตั้งค่าและลืม"

โอเคนี่เก่าแล้ว แต่โปรดให้ฉันช่วยแก้ปัญหาด้วย :)

function sync( callback ){
    syncCount--;
    if ( syncCount < 1 ) callback();
}
function allFinished(){ .............. }

window.syncCount = 2;

$.ajax({
    url: 'url',
    success: function(data) {
        sync( allFinished );
    }
});
someFunctionWithCallback( function(){ sync( allFinished ); } )

นอกจากนี้ยังทำงานร่วมกับฟังก์ชันที่มีการโทรกลับ คุณตั้งค่า syncCount และคุณเรียกใช้ฟังก์ชัน sync (... ) ในการเรียกกลับของทุกการกระทำ

$.ajax({type:'POST', url:'www.naver.com', dataType:'text', async:false,
    complete:function(xhr, textStatus){},
    error:function(xhr, textStatus){},
    success:function( data ){
        $.ajax({type:'POST', 
            ....
            ....
            success:function(data){
                $.ajax({type:'POST',
                    ....
                    ....
            }
        }
    });

ฉันขอโทษ แต่ฉันอธิบายไม่ได้ว่าฉันเป็นอะไรเพราะฉันเป็นคนเกาหลีที่พูดภาษาอังกฤษไม่ได้แม้แต่คำเดียว แต่ฉันคิดว่าคุณสามารถเข้าใจได้อย่างง่ายดาย

async   : false,

ตามค่าเริ่มต้นคำขอทั้งหมดจะถูกส่งแบบอะซิงโครนัส (กล่าวคือตั้งค่าเป็นจริงตามค่าเริ่มต้น) falseหากคุณจำเป็นต้องร้องขอซิงโครตั้งค่าตัวเลือกนี้ คำขอและdataType: "jsonp"คำขอข้ามโดเมนไม่สนับสนุนการทำงานแบบซิงโครนัส โปรดทราบว่าคำขอซิงโครนัสอาจล็อกเบราว์เซอร์ชั่วคราวปิดใช้งานการดำเนินการใด ๆ ในขณะที่คำขอทำงานอยู่ ตั้งแต่jQuery 1.8การใช้async: falseกับjqXHR ( $.Deferred) จะเลิกใช้แล้ว คุณต้องใช้ความสำเร็จ / ข้อผิดพลาด / สมบูรณ์ตัวเลือกการเรียกกลับแทนในวิธีการที่สอดคล้องกันของjqXHRวัตถุเช่นหรือเลิกjqXHR.done()jqXHR.success()