সমস্ত jQuery Ajax অনুরোধ না করা পর্যন্ত অপেক্ষা করুন?

675

সমস্ত jQuery Ajax অনুরোধ অন্য ফাংশনের অভ্যন্তরে না আসা পর্যন্ত আমি কীভাবে একটি ফাংশন অপেক্ষা করব?

সংক্ষেপে, আমার পরবর্তী সম্পাদন করার আগে আমার সমস্ত অ্যাজাক্স অনুরোধগুলি সম্পন্ন হওয়ার জন্য অপেক্ষা করতে হবে। কিন্তু কিভাবে?

javascript  jquery  ajax 
— jamietelin
সূত্র
আপনি কীভাবে আপনার মূল এজাক্স অনুরোধগুলি কল করছেন?
— নেকেডব্রঞ্চ
2
"সম্পন্ন" বলতে কী বোঝ? আমি এটিকে "সমস্ত অনুরোধগুলি সফলভাবে শেষ হয়েছে কি না" (সমাধান বা বাতিল) হিসাবে বুঝতে পেরেছি। তবে আপনার অর্থ হতে পারে "সমস্ত অনুরোধগুলি সফলভাবে শেষ হয়েছে" (সমাধান হয়েছে)। api.jquery.com/category/deferred-object- এ
— অ্যাড্রিয়েন

উত্তর:

911

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,            
        ...
    });
}

আমার মতে এটি একটি পরিষ্কার এবং পরিষ্কার বাক্য গঠন করে এবং এজাজ স্টার্ট এবং এজাক্সটপের মতো কোনও বৈশ্বিক চলক জড়িত এড়ানো যায় যা আপনার পৃষ্ঠাটি বিকাশের সাথে সাথে অবাঞ্ছিত পার্শ্ব প্রতিক্রিয়া থাকতে পারে।

আপনি যদি অজেক্স আর্গুমেন্টের জন্য অপেক্ষা করতে হয় তা আগেই জানেন না (যেমন আপনি একটি পরিবর্তনশীল সংখ্যক যুক্তি ব্যবহার করতে চান), এটি এখনও করা যেতে পারে তবে এটি সামান্য কিছুটা কৌশলযুক্ত। $ .When () (এবং সম্ভবত jQuery। পরিবর্তনশীল সংখ্যক তর্কযুক্ত সমস্যার সাথে সমস্যা সমাধানের সময় ) এ ডিফার্ডের একটি অ্যারে পাস দেখুন ।

এজ্যাক্স স্ক্রিপ্ট ইত্যাদির ব্যর্থতা মোডগুলির উপর যদি আপনার আরও গভীর নিয়ন্ত্রণের প্রয়োজন হয় তবে আপনি যে জিনিসটি ফিরিয়ে দিয়েছেন সেটিকে সংরক্ষণ করতে পারবেন .when()- এটি একটি জিকুয়েরি প্রতিশ্রুতি অবজেক্ট যা সমস্ত মূল এজাক্স কোয়েরিগুলিকে অন্তর্ভুক্ত করে। বিস্তারিত সাফল্য / ব্যর্থতা হ্যান্ডলার যোগ করতে আপনি কল করতে .then()বা .fail()এটি করতে পারেন।

— অ্যালেক্স
সূত্র
46
এটি একটি সঠিক উত্তর হিসাবে চিহ্নিত করা উচিত কারণ এটি সহজ, দক্ষ এবং দুর্দান্ত কাজ করে। এছাড়াও, এটিও লক্ষ করা উচিত যে কেবল এমন নয়, এমন কোনও জিনিসকে আরও কার্যকর পদ্ধতি রয়েছে যা $.whenপ্রত্যাবর্তন করে । উদাহরণস্বরূপ, উভয় অনুরোধ সফল হলে বা কমপক্ষে একটির মধ্যে ব্যর্থ হলে পদ্ধতির সাহায্যে আপনি প্রতিক্রিয়া জানাতে পারেন। Promise.done.then(onSuccess, onFailure)
— স্কালে
2
আজেক্স 1..4 অনুরোধগুলিকে একটি অ্যারেতে গুচ্ছ করে কী পাস করা সম্ভব?
— অ্যান্ডিগ
33
failকেস নিয়ে সাবধানতা অবলম্বন করুন । বিপরীতে done, failপ্রথম দিকে তত্ক্ষণাত্ অগ্নিকাণ্ডগুলি ব্যর্থ হয় এবং অবশিষ্ট ডিফার্ডগুলিকে উপেক্ষা করে।
— রায়ান মোহর
1
@ এসকলি একটি onFailureফাংশন সংযুক্ত হতে পারে এই সত্যটি তুলে ধরার জন্য ধন্যবাদ । আমি যেমন ওপি-র প্রশ্নের মন্তব্যে ইঙ্গিত করেছি: তিনি "সম্পন্ন" বলতে কী বোঝাতে চেয়েছেন সে আরও সূক্ষ্মভাবে নির্দেশ করতে চায়। "রায়ান মোহর" এর failমত ভিন্ন বিষয়টির বিষয়েও খুব ভাল বক্তব্য ছিল done, Promisesআমার ধারণা এইচটিএমএল 5 রোকস
— অ্যাড্রিয়েন
1
লোককে কখন পদ্ধতিটি এবং সাধারণভাবে প্রতিশ্রুতি দেওয়া হয়েছে তা প্রকাশ করা দুর্দান্ত, তবে আমি মনে করি এটি সর্বোত্তম উত্তর নয়। যদি লাইনটির নিচে এই এজ্যাক্সগুলির মধ্যে যে কোনও একটি অন্য এজ্যাক্স অনুরোধ তৈরি করে এবং তারপরে সেই নতুন প্রতিশ্রুতি সঠিকভাবে একীভূত না করে ... সেই অনুরোধগুলি এই কৌশলটি থেকে মুক্তি পাবে escape উদাহরণস্বরূপ, আমি শপাইফ লাইব্রেরিটি আমি এজাক্স-এড-টু-কার্ট আচরণের জন্য ব্যবহার করছি সেটিকে পরিবর্তন না করেই এই কৌশলটি ব্যবহার করতে পারি না, কারণ এটি কোনও 'প্রতিশ্রুতি' উপায়ে লেখা হয়নি, এবং এটি তৈরি করা এক্সএইচআর অবজেক্টগুলি কখনই ফিরিয়ে দেয় না। এটা কোনো কিছু হলো? এখনও দুর্দান্ত উত্তর, যদিও!
— Ziggy
292

আপনার ডকুমেন্টে সমস্ত ajax অনুরোধগুলি শেষ হয়ে গেলে আপনি যদি তা জানতে চান তবে সেগুলির মধ্যে কতগুলি উপস্থিত রয়েছে তা কেবলমাত্র $ .জ্যাক্সটপ ইভেন্টটি এইভাবে ব্যবহার করুন :

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

এই ক্ষেত্রে, আপনার ভবিষ্যতে শেষ হতে পারে, অ্যাপ্লিকেশনটিতে কতগুলি অনুরোধ চলছে তা অনুমান করার দরকার নেই বা ফাংশনগুলির জটিল যুক্তিটি খনন করতে পারে না বা কোন ফাংশনগুলি HTTP(S)অনুরোধ করছে তা খুঁজে বের করতে পারে না ।

$.ajaxStopএখানে এমন কোনও HTMLনোডের সাথেও আবদ্ধ হতে পারে যা আপনি মনে করেন রিকাস্ট দ্বারা সংশোধিত হতে পারে।

আপডেট:
আপনি যদি ESসিনট্যাক্সের সাথে লেগে থাকতে চান , তবে আপনি পরিচিত ajaxপদ্ধতিগুলির জন্য Promise.all ব্যবহার করতে পারেন :

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

এখানে একটি উত্সাহব্যঞ্জক পয়েন্ট যে এটা দিয়ে উভয় কাজ করে Promisesএবং $.ajaxঅনুরোধ।

এখানে jsFizz বিক্ষোভ।

আপডেট 2:
আরও বেশি সাম্প্রতিক সংস্করণ অ্যাসিঙ্ক / প্রতীক্ষিত বাক্য গঠন ব্যবহার করে :

try {
  const results = await Promise.all([ajax1(), ajax2()])
  // do other actions
} catch(ex) { }
— আর্সেন খাচাতুরিয়ান
সূত্র
16
+1 টি অনেক অন্যান্য উত্তর চেয়ে ভাল ক্ষেত্রে আপনি বেনামী callbacks / বন্ধ সঙ্গে 3rd পার্টি স্ক্রিপ্ট সাথে মোকাবিলা করতে হবে।
— কায়সার
5
@ কাইজার বৈধ পয়েন্ট তবে প্রশ্নটি যা জিজ্ঞাসা করছে এটি তা নয়। আপনি যদি সব AJAX কল ফিরে আসার অপেক্ষা না করতে চান তবে এটি খুব ভাল নয়। প্রশ্নটি আপনার নিজের দ্বারা করা এজেএক্স কলগুলির জন্য অপেক্ষা করার বিষয়ে সুনির্দিষ্ট the অন্য কিছু কোড অন্য একটি এজেএক্স কল করেছে যার জন্য আপনি অপেক্ষা করতে চান না।
— জুয়ান মেন্ডেস
6
কখন () সমাধানের তুলনায়, এজাক্স কলগুলির সংখ্যা জানা না গেলেও এটির কাজ করার সুবিধা রয়েছে।
— অ্যালেক্সিস ডুফরনয়
5
যখন () সমাধানের সাথে তুলনা করা হয় তখন এটির অন্যান্য উপাদানগুলির সাথে একসাথে ভালভাবে কাজ না করার বড় অসুবিধা রয়েছে কারণ এটি একটি ডকুমেন্ট-বিস্তৃত বিশ্বব্যাপী রাষ্ট্র ভাগ করে নেয়। যদি ধারাবাহিকভাবে কিছু দীর্ঘ ভোটগ্রহণ চলতে থাকে তবে এটি কখনও চালিত হতে পারে না।
— বার্গি
3
আপনি @ অ্যাড্রিনবি ঠিকভাবে সঠিক নন, আজাকসটপ সমস্ত এজ্যাক্স অনুরোধগুলি হ্যান্ডেল করে না তারা সফল হয় বা না, ঠিক আমার কথার প্রমাণ হিসাবে এই jsfiddle.net/36votxba/2 দেখুন
— আর্সেন
32

আমি আমার আত্ম দ্বারা gnarf দ্বারা একটি ভাল উত্তর খুঁজে পেয়েছি যা ঠিক আমি যা খুঁজছিলাম :)

jQuery আজাক্স কিউ 

//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);
        }
    });
— jamietelin
সূত্র
37
দেখে মনে হচ্ছে আপনি এই উত্তরের যথাযথ গুণাবলী দিতে ভুলে গেছেন , আমি এটি যুক্ত করেছি।
— টিম পোস্ট
21

ajaxStopইভেন্টটি ব্যবহার করুন ।

উদাহরণস্বরূপ, ধরা যাক আপনার 100 টি এজ্যাক্স অনুরোধ আনার সময় আপনার একটি লোডিং ... বার্তা রয়েছে এবং আপনি একবার বার্তাটি লোড করে লুকিয়ে রাখতে চান।

JQuery ডক থেকে :

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

মনে রাখবেন যে এটি পৃষ্ঠাতে সমস্ত অজাক্স অনুরোধগুলি সম্পন্ন হওয়ার জন্য অপেক্ষা করবে।

— olafure
সূত্র
5
এটি অনুমান করে যে আপনি জানেন যে পৃষ্ঠায় অন্য কোনও আজেএক্স অনুরোধ থাকবে না, খুব ভাল অনুমান নয়
— হুয়ান মেন্ডেস
JQuery 1.8 হিসাবে, .ajaxStop () পদ্ধতিটি কেবলমাত্র নথির সাথে সংযুক্ত করা উচিত।
— জিওমরিলো
1
আমি ভুল হলে আমাকে সংশোধন করুন কিন্তু এটি কি আপনার প্রকল্পটিকে "পুরাতন স্কুল ওয়েব ফর্ম" সাইটে রূপান্তরিত করবে না? আমি বলতে চাইছি যদি আপনার পুরো পৃষ্ঠাটি চালিয়ে যাওয়ার আগে কোনও অনুরোধের জন্য অপেক্ষা করতে হয় তবে প্রথমে এজাক্স অনুরোধটির বিন্দুটি কী?
— বিলআরহল
@ বিলরুহল আমাদের ক্ষেত্রে, আমি নতুন স্টাফ তৈরি করতে একটি জেকারি সংগ্রহটি লুপ করছি এবং কিছু লেআউট সামঞ্জস্য করার আগে পুরো সংগ্রহটি শেষ হয়ে গেলে তার সম্পর্কে জানতে হবে। বিশেষ অস্বাভাবিক মামলার মতো বলে মনে হচ্ছে না। খারাপ লাগবে যদি অন্যান্য অজ্যাক্স স্টাফগুলির একগুচ্ছ প্রক্রিয়াজাত হতে পারে তবে এটি এখানে হবে না।
— EON
21

দ্রষ্টব্য: উপরের উত্তরগুলি কার্যকারিতা ব্যবহার করে যা এই উত্তরটি লেখার সময় ছিল না। আমি jQuery.when()এই পদ্ধতির পরিবর্তে ব্যবহার করার পরামর্শ দিচ্ছি , তবে আমি উত্তরটি historicalতিহাসিক উদ্দেশ্যে ছেড়ে দিচ্ছি।

-

আপনি সম্ভবত একটি সাধারণ গণনা সেমফোর দিয়ে যেতে পারেন, যদিও আপনি এটি কীভাবে প্রয়োগ করেন তা আপনার কোডের উপর নির্ভরশীল। একটি সাধারণ উদাহরণ কিছু হবে ...

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;

আপনি যদি এটি {async: false like এর মতো পরিচালনা করতে চান তবে আপনি ব্রাউজারটি লক করতে চান না, আপনি 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();
    });
});
— BBonifield
সূত্র
10
এটি দেখে মনে হচ্ছে এটি অতিমাত্রায় একটি তুচ্ছ সমস্যা জটিল করে তুলবে।
— ক্রিস
2
এটি আসলে এত জটিল নয়। সিএসে গণনা করা সেমোফোরগুলি একটি সাধারণ প্রক্রিয়া। আপনি যদি পছন্দ করেন তবে jQuery সারি ব্যবহার করে উদাহরণটি নিজের নিজের নিজের জন্য semaphore প্রয়োগ না করেই কাজ করবে।
— বিবিনিফিল্ড
1
আমি সেম্যাফোর কাউন্টারে কোনও সমস্যা দেখছি না, তবে ফলস্বরূপ কলব্যাকটি পরিচালনা করার জন্য চারটি ফাংশন থাকার ধারণা নিয়ে আমি একটি সমস্যা দেখতে পাচ্ছি। আপনার প্রথমে কোনও ফাংশন সংজ্ঞায়িত করা উচিত, তারপরে প্রতিটি ক্ষেত্রে সেই ফাংশনটি উল্লেখ করুন .get()। কমপক্ষে আপনি সেই কোডটি নকল করবেন না। শুধু তা-ই নয় তবে function(){}প্রতিটি সময় ঘোষণা করা প্রতিটি সময় মেমরির বরাদ্দ দেয়! বরং খারাপ অভ্যাস যদি আপনি কোনও স্ট্যাটিকালি সংজ্ঞায়িত ফাংশন কল করতে পারেন।
— অ্যালেক্সিস উইল্কে
1
@ অ্যালেক্সিসওয়িল্ক এটি একটি 4.5 বছরের পুরানো উত্তর এবং এটি কীভাবে semaphores এবং সারি কাজ করে তার একটি উদাহরণ হিসাবে বোঝানো হয়েছিল। আপনি এই সম্পর্কে কিছুটা কঠোরভাবে ভাবছেন, এবং আমি মনে করি না যে একটি পয়েন্ট তৈরির জন্য রাজধানী প্রয়োজন।
— বিবিনিফিল্ড
2
আচ্ছা ... আমি সেই ব্যক্তি নই যিনি আপনাকে একটি -১ দিয়েছেন ... এবং আমি বুঝতে পারি যে উত্তরগুলি বয়সের দিকে ঝোঁক করে। তবুও, লোকেরা তাদের সন্ধান করে চলেছে এবং যতদূর আমি জানি যে এখনও তাদের ব্যবহারের সম্ভাব্য লোকদের তথ্য দেওয়া নিষিদ্ধ নয়।
— অ্যালেক্সিস উইলকে 23'15
8

জাভাস্ক্রিপ্ট ইভেন্ট ভিত্তিক, সুতরাং আপনার কখনও অপেক্ষা করা উচিত নয় , বরং হুক / কলব্যাক সেট করুন

আপনি সম্ভবত 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...
  }
});

যদিও আপনাকে আপনার (গুলি) এজাক্স অনুরোধ (গুলি) কীভাবে আরও সুনির্দিষ্ট হওয়ার জন্য ডাকা হয় তার একটি সিউডোকোড পোস্ট করা উচিত ...

— স্টেফানো
সূত্র
8

সামান্য পরিশ্রম এইরকম কিছু:

// 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();
});

আশা দরকারী হতে পারে ...

— Jesfre
সূত্র
অন্যান্য উত্তরগুলি প্রযুক্তিগত দিক থেকে আরও ভাল, যেহেতু এটি বোঝার উপায় সহজ, তবে আমি সত্যিই এটি পছন্দ করি। নিস!
— জে
4

আপনি যদি এজাক্স অনুরোধটি অ্যাসিঙ্ক্রোনাস হতে চান তবে jQuery আপনাকে নির্দিষ্ট করতে দেয় specify আপনি কেবলমাত্র এজাক্স অনুরোধগুলিকে সিঙ্ক্রোনাস করতে পারেন এবং তারপরে ফিরে না আসা পর্যন্ত বাকি কোডগুলি কার্যকর করা হবে না।

উদাহরণ স্বরূপ:

jQuery.ajax({ 
    async: false,
    //code
});
— shmuel613
সূত্র
42
একটি বিষয় লক্ষণীয়: {async: false false ব্যবহার করা অস্থায়ীভাবে ব্রাউজারটিকে লক করতে পারে। api.jquery.com/jQuery.ajax
— বিবিনিফিল্ড
30
এটি স্ট্যান্ডার্ড jQuery / জাভাস্ক্রিপ্ট অনুশীলনের বিপরীতে চলে। এজেএক্স সর্বদা অ্যাসিঙ্ক্রোনাস হওয়ার কথা। পরিবর্তে আপনার jQuery.when () ব্যবহার করা উচিত।
— সিস্টেমপারাডক্স
43
এটা মারাত্মক খারাপ ধারণা! কখনই না! অবরুদ্ধ করা = ব্যবহারকারীর ক্রিয়াগুলি মোটেও সাড়া দিচ্ছে না, এমনকি স্ক্রোলিং বা যে কোনও কিছুতেও! (এছাড়াও, অ্যাসিঙ্ক: মিথ্যা jQuery 1.8 এ
— অবচয় করা হবে
5
বিশেষত যদি কোনও অনাকাঙ্ক্ষিত কারণে অনুরোধটি ব্যর্থ হয় বা দীর্ঘ সময় নেয় (যা মরফির আইন অনুসারে ঘটতে বাধ্য হয়!), উপরে বর্ণিত ব্রাউজার লক হওয়ার কারণে এটি সাধারণত প্রোডাকশন কোডের জন্য একটি খারাপ ধারণা।
— অ্যালেক্স
27
এটি একটি মারাত্মক খারাপ ধারণা। এই উত্তরটি ব্যবহার করবেন না।
— টৌরেন
2

আপনার যদি কিছু সাধারণ প্রয়োজন হয়; একবার এবং কলব্যাক

        //multiple ajax calls above
        var callback = function () {
            if ($.active !== 0) {
                setTimeout(callback, '500');
                return;
            }
            //whatever you need to do here
            //...
        };
        callback();
— Fatmuemoo
সূত্র
4
এটি একটি অন্তহীন লুপ তৈরি করতে পারে!
— দিয়েগো ফ্যাভেরো
2
এটি কি অন্তহীন লুপ? কখন? এজেএক্স কখন ফিরে আসে না?
— জোনাথন
2

@ বিনিফিল্ড উত্তরের ভিত্তিতে, আমি একটি ইউটিলিটি ফাংশন লিখেছি যাতে সেমফোর লজিকটি সমস্ত এজাক্স কলগুলিতে ছড়িয়ে না যায়।

untilAjax ইউটিলিটি ফাংশন যা সমস্ত এজ্যাক্স কলগুলি সম্পন্ন হওয়ার পরে কলব্যাক ফাংশন শুরু করে।

ajaxObjsএজ্যাক্স সেটিং অবজেক্টের একটি অ্যারে [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;
  };

উদাহরণ: doSomethingফাংশন ব্যবহার 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.
  });
}
— সঞ্জীব কুমার ডাঙ্গী
সূত্র
2

আপনি স্ক্র্যাচ থেকে শুরু করলে আমি highly .When () ব্যবহারের পরামর্শ দিচ্ছি ।

যদিও এই প্রশ্নের মিলিয়নেরও বেশি উত্তর রয়েছে, তবুও আমি আমার মামলার জন্য কার্যকর কিছু পাইনি। ধরা যাক আপনাকে একটি বিদ্যমান কোডবেস মোকাবেলা করতে হবে, ইতিমধ্যে কিছু অজ্যাক্স কল করেছে এবং প্রতিশ্রুতিগুলির জটিলতা প্রবর্তন করতে এবং / বা পুরো জিনিসটি আবার করতে চাই না।

আমরা সহজেই jQuery .data, .onএবং এমন .triggerফাংশনগুলির সুবিধা নিতে পারি যা চিরকাল থেকেই jQuery এর অংশ হয়ে রয়েছে।

Codepen

আমার সমাধান সম্পর্কে ভাল জিনিস হ'ল:

  • এটি কলব্যাকের উপর নির্ভর করে ঠিক

  • triggerNowOrOnLoadedডেটা ইতিমধ্যে লোড করা হয়েছে বা আমরা এখনও এর জন্য অপেক্ষা করছি কিনা তা ফাংশনটির কোনও চিন্তা নেই

  • এটি বিদ্যমান কোডে প্লাগ করা অত্যন্ত সহজ

$(function() {

  // wait for posts to be loaded
  triggerNowOrOnLoaded("posts", function() {
    var $body = $("body");
    var posts = $body.data("posts");

    $body.append("<div>Posts: " + posts.length + "</div>");
  });


  // some ajax requests
  $.getJSON("https://jsonplaceholder.typicode.com/posts", function(data) {
    $("body").data("posts", data).trigger("posts");
  });

  // doesn't matter if the `triggerNowOrOnLoaded` is called after or before the actual requests 
  $.getJSON("https://jsonplaceholder.typicode.com/users", function(data) {
    $("body").data("users", data).trigger("users");
  });


  // wait for both types
  triggerNowOrOnLoaded(["posts", "users"], function() {
    var $body = $("body");
    var posts = $body.data("posts");
    var users = $body.data("users");

    $body.append("<div>Posts: " + posts.length + " and Users: " + users.length + "</div>");
  });

  // works even if everything has already loaded!
  setTimeout(function() {

    // triggers immediately since users have been already loaded
    triggerNowOrOnLoaded("users", function() {
      var $body = $("body");
      var users = $body.data("users");

      $body.append("<div>Delayed Users: " + users.length + "</div>");
    });

  }, 2000); // 2 seconds

});

// helper function
function triggerNowOrOnLoaded(types, callback) {
  types = $.isArray(types) ? types : [types];

  var $body = $("body");

  var waitForTypes = [];
  $.each(types, function(i, type) {

    if (typeof $body.data(type) === 'undefined') {
      waitForTypes.push(type);
    }
  });

  var isDataReady = waitForTypes.length === 0;
  if (isDataReady) {
    callback();
    return;
  }

  // wait for the last type and run this function again for the rest of the types
  var waitFor = waitForTypes.pop();
  $body.on(waitFor, function() {
    // remove event handler - we only want the stuff triggered once
    $body.off(waitFor);

    triggerNowOrOnLoaded(waitForTypes, callback);
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>Hi!</body>
স্নিপেট প্রসারিত করুন

— cilf
সূত্র
2

সমস্ত এজাক্স লোড শেষ হয়ে গেলে আমি আকার চেক ব্যবহার করছি

function get_ajax(link, data, callback) {
    $.ajax({
        url: link,
        type: "GET",
        data: data,
        dataType: "json",
        success: function (data, status, jqXHR) {
            callback(jqXHR.status, data)
        },
        error: function (jqXHR, status, err) {
            callback(jqXHR.status, jqXHR);
        },
        complete: function (jqXHR, status) {
        }
    })
}

function run_list_ajax(callback){
    var size=0;
    var max= 10;
    for (let index = 0; index < max; index++) {
        var link = 'http://api.jquery.com/ajaxStop/';
        var data={i:index}
        get_ajax(link,data,function(status, data){
            console.log(index)
            if(size>max-2){
                callback('done')
            }
            size++
            
        })
    }
}

run_list_ajax(function(info){
    console.log(info)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
স্নিপেট প্রসারিত করুন

— tranchau
সূত্র
আপনার উদাহরণ পর্যন্ত থাম্বস আপ।
— মারওয়াআহমাদ
2

অ্যালেক্সের উত্তরটি প্রসারিত করার জন্য, আমার কাছে পরিবর্তনশীল তর্ক এবং প্রতিশ্রুতি সহ একটি উদাহরণ রয়েছে with আমি চাইছিলাম আজাক্সের মাধ্যমে চিত্রগুলি লোড করা এবং সেগুলি সমস্ত লোড হওয়ার পরে পৃষ্ঠাতে সেগুলি প্রদর্শন করতে।

এটি করার জন্য, আমি নিম্নলিখিতগুলি ব্যবহার করেছি:

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/

— GammaGames
সূত্র
2

অন্যান্য জবাব উল্লিখিত হিসাবে আপনি ajaxStop()সমস্ত এজাক্স অনুরোধ শেষ না হওয়া পর্যন্ত অপেক্ষা করতে ব্যবহার করতে পারেন ।

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

আপনি যদি কোনও নির্দিষ্ট ajax()অনুরোধের জন্য এটি করতে চান complete()তবে নির্দিষ্ট অজ্যাক্স অনুরোধের অভ্যন্তরে পদ্ধতিটি সর্বোত্তমভাবে করতে পারেন :

$.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উদাহরণটি পরিষ্কার করে দিতাম ।

// Note:
// resolve() is used to mark the promise as resolved
// reject() is used to mark the promise as rejected

$(document).ready(function() {
    $("button").on("click", function() {

        var ajax1 = new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://miro.medium.com/max/1200/0*UEtwA2ask7vQYW06.png",
                xhrFields: { responseType: 'blob'},
                success: function(data) {
                    setTimeout(function() {
                        $('#image1').attr("src", window.URL.createObjectURL(data));
                        resolve(" Promise ajax1 resolved");
                    }, 1000);
                },
                error: function() {
                    reject(" Promise ajax1 rejected");
                },
            });
        });

        var ajax2 = new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://cdn1.iconfinder.com/data/icons/social-media-vol-1-1/24/_github-512.png",
                xhrFields: { responseType: 'blob' },
                success: function(data) {
                    setTimeout(function() {
                         $('#image2').attr("src", window.URL.createObjectURL(data));
                         resolve(" Promise ajax2 resolved");
                    }, 1500);
                },
                error: function() {
                    reject(" Promise ajax2 rejected");
                },
            });
        });

        var ajax3 = new Promise((resolve, reject) => {
            $.ajax({
                type: "GET",
                url: "https://miro.medium.com/max/632/1*LUfpOf7teWvPdIPTBmYciA.png",
                xhrFields: { responseType: 'blob' },
                success: function(data) {
                    setTimeout(function() {
                         $('#image3').attr("src", window.URL.createObjectURL(data));
                         resolve(" Promise ajax3 resolved");
                    }, 2000);
                },
                error: function() {
                    reject(" Promise ajax3 rejected");
                },
            });
        });
        
        Promise.all([ajax1, ajax2, ajax3]).then(values => {
            console.log("We waited until ajax ended: " + values);
            console.log("My few ajax ended, lets do some things!!")
        }, reason => {
            console.log("Promises failed: " + reason);
        });
        
        // Or if you want wait for them individually do it like this
        // ajax1.then(values => {
        //    console.log("Promise 1 resolved: " + values)
        // }, reason => {
        //     console.log("Promise 1 failed: " + reason)
        // });
    });

});
img {
  max-width: 200px;
  max-height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Make AJAX request</button>
<div id="newContent">
    <img id="image1" src="">
    <img id="image2" src="">
    <img id="image3" src="">
</div>
স্নিপেট প্রসারিত করুন

— SilverSurfer
সূত্র
0

আমি সহজ উপায় পেয়েছি, এটি ব্যবহার করে shift() 

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
— uingtea
সূত্র
0

আমার সমাধানটি নিম্নরূপ 

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);
          });

বেশ সুন্দরভাবে কাজ করেছেন। আমি এটি করার বিভিন্ন পদ্ধতিতে অনেক চেষ্টা করেছি, তবে আমি এটিকে সবচেয়ে সহজ এবং পুনরায় ব্যবহারযোগ্য বলে মনে করেছি। আশা করি এটা সাহায্য করবে

— এরিক শান মুর
সূত্র
0

আমার সমাধান দেখুন:

1. আপনার জাভাস্ক্রিপ্ট ফাইলটিতে এই ফাংশনটি (এবং পরিবর্তনশীল) প্রবেশ করান:

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
    });
  }
}

২. আপনার অনুরোধগুলির সাথে একটি অ্যারে তৈরি করুন:

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. কলব্যাক ফাংশন তৈরি করুন:

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

৪. পরামিতিগুলির সাথে রানফানশনকিউ ফাংশনটি কল করুন:

runFunctionQueue(f, 0, QuestionInsert_callback);
// first parameter: array with requests data
// second parameter: start from first request
// third parameter: the callback function
— Briganti
সূত্র
-4

এইভাবে চেষ্টা করুন। এজ্যাক্স কল শেষ না হওয়া পর্যন্ত অপেক্ষা করতে জাভা স্ক্রিপ্ট ফাংশনের ভিতরে একটি লুপ তৈরি করুন।

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;
}
— ChinaHelloWorld
সূত্র
1
আপনার setTimeout()না take a sleep। এই ক্ষেত্রে, আপনি doneসত্য হওয়া অবধি সমস্ত ট্যাব ব্লক করে রেখেছেন ।
— অ্যালেক্সিস উইল্কে
1
আমি মনে করি এটিই এই বিষয়টির জন্য জিজ্ঞাসা করছে: "সমস্ত jQuery আজাক্স অনুরোধ না হওয়া পর্যন্ত অপেক্ষা করুন"।
— চায়নাহেলো ওয়ার্ল্ড
1
আপনি কি এই কোডটি পরীক্ষা করেছেন? আমার প্রত্যাশাটি doneকখনই লুপটি চলমান অবস্থায় কখনই সত্য হবে না। যদি লুপটি চলমান থাকে তবে ইভেন্টের লুপটি চালিয়ে যেতে পারে না এবং তাই এজ্যাক্স সাফল্যে কখনই কলব্যাক চালাবেনা।
— কেভিন বি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.