.Each () শেষ হওয়ার পরে একটি jQuery ফাংশন শুরু করা

Question

JQuery এ, (বা অন্য কোনও ধরণের পুনরাবৃত্তি কলব্যাক) এর অনুরোধ শেষ হওয়ার পরে কোনও কলব্যাক শুরু করা বা কোনও ইভেন্ট ট্রিগার করা সম্ভব ?.each()

উদাহরণস্বরূপ, আমি এই "বিবর্ণ এবং অপসারণ" সম্পূর্ণ করতে চাই

$(parentSelect).nextAll().fadeOut(200, function() {
    $(this).remove();
});

কিছু গণনা করার আগে এবং এর পরে নতুন উপাদান সন্নিবেশ করানোর আগে $(parentSelect)। আমার হিসাবগুলি ভুল হয় যদি বিদ্যমান উপাদানগুলি এখনও jQuery তে দৃশ্যমান থাকে এবং ঘুমন্ত / কিছু নির্বিচার পরিমাণে বিলম্বিত করে (প্রতিটি উপাদানগুলির জন্য 200) ভালভাবে একটি ভঙ্গুর সমাধান বলে মনে হয়।

আমি সহজে করতে পারেন .bind()এমন একটি ইভেন্টের কলব্যাক করার জন্য প্রয়োজনীয় যুক্তিবিজ্ঞান কিন্তু আমি নিশ্চিত ডাকা পরিচ্ছন্নভাবে কিভাবে নই .trigger()পুনরাবৃত্তির উপরে হওয়ার পরে সম্পন্ন । স্পষ্টতই, আমি পুনরাবৃত্তির ভিতরে ট্রিগারটি ডাকতে পারি না কারণ এটি একাধিকবার জ্বলতে পারে।

এর ক্ষেত্রে $.each(), আমি ডেটা আর্গুমেন্টের শেষে কিছু যুক্ত করার বিষয়টি বিবেচনা করেছি (যা আমি নিজেই পুনরাবৃত্তির শরীরে সন্ধান করতাম) তবে আমি বাধ্য হয়ে এই বিষয়টিকে ঘৃণা করব তাই আমি আশা করছিলাম যে অন্য কোনও মার্জিত ছিল পুনরাবৃত্তি কলব্যাক্সের সাথে শ্রদ্ধার সাথে প্রবাহকে নিয়ন্ত্রণ করার উপায়।

Comments

আমি কী সঠিকভাবে বুঝতে পারি যে এটি ".চ ()" নিজেই এতটা নয় যে আপনি শেষ করতে চান, বরং ".each ()" কল দিয়ে সমস্ত অ্যানিমেশন চালু হয়েছে?

— পয়েন্টি

এটি একটি ভাল পয়েন্ট। এই নির্দিষ্ট প্রশ্নের সাথে, হ্যাঁ, আমি মূলত ".each ()" নিজেই শেষ হওয়ার বিষয়ে উদ্বিগ্ন ... তবে আমি মনে করি আপনি আরও কার্যকর প্রশ্ন উত্থাপন করেছেন।

— লুথার বেকার

এই github.com/ACFBentveld/Await- এর

— উইম প্রুইকসমা

Answer 1

@ টিভির উত্তরের বিকল্প:

var elems = $(parentSelect).nextAll(), count = elems.length;

elems.each( function(i) {
  $(this).fadeOut(200, function() { 
    $(this).remove(); 
    if (!--count) doMyThing();
  });
});

মনে রাখবেন যে .each()নিজেই সিঙ্ক্রোনাস - যে বিবৃতিটি কলটির অনুসরণ করে তা কল শেষ .each()হওয়ার পরেই কার্যকর করা হবে .each()। তবে, পুনরাবৃত্তিতে শুরু হওয়া অ্যাসিক্রোনাস অপারেশনগুলি .each()অবশ্যই তাদের নিজস্ব পথে চালিত হবে। এটি এখানে সমস্যা: উপাদানগুলি বিবর্ণ করার জন্য কলগুলি টাইমার-চালিত অ্যানিমেশন এবং সেগুলি তাদের নিজস্ব গতিতে অব্যাহত থাকে।

উপরের সমাধানটি, সুতরাং, কতগুলি উপাদান ফেইড হচ্ছে তা ট্র্যাক করে of প্রতিটি কল .fadeOut()একটি সমাপ্তি কলব্যাক পেতে। কলব্যাকটি লক্ষ্য করে যে এটি জড়িত সমস্ত মূল উপাদানগুলির মধ্যে গণনা করা হয়, পরবর্তী কিছু পদক্ষেপের সাথে আত্মবিশ্বাসের সাথে নেওয়া যেতে পারে যে সমস্ত বিবর্ণ শেষ হয়ে গেছে।

এটি একটি চার বছরের পুরানো উত্তর (2014 এর এই সময়ে)। এটি করার একটি আধুনিক উপায় সম্ভবত ডিফার্ড / প্রতিশ্রুতি প্রক্রিয়া ব্যবহারের সাথে জড়িত, যদিও উপরেরটি সহজ এবং সঠিকভাবে কাজ করা উচিত।

Comments

আমি এই পরিবর্তনটি পছন্দ করি, যদিও আপনি গণনা করছেন বলে আমি যৌক্তিক অবজ্ঞা (--count == 0) এর পরিবর্তে 0 এর সাথে তুলনা করব। আমার কাছে এটি অভিপ্রায়কে আরও পরিষ্কার করে, যদিও এর একই প্রভাব রয়েছে।

— tvanfosson

দেখা যাচ্ছে যে প্রশ্নটিতে আপনার প্রাথমিক মন্তব্যটি স্পট ছিল। আমি .each () সম্পর্কে জিজ্ঞাসা করছিলাম এবং আমি ভেবেছিলাম এটিই আমি চেয়েছিলাম তবে আপনি এবং ট্যাভনফসন এবং এখন প্যাট্রিক উল্লেখ করেছেন - এটিই ছিল আমার চূড়ান্ত ফিডআউট actually সূচকের) সম্ভবত সবচেয়ে নিরাপদ।

— লুথার বেকার

@ এডিমো, "খুব জটিল" বলতে কী বোঝ? কোন অংশটি জটিল?

— পয়েন্টি

Answer 2

এটি সম্ভবত দেরি করতে পারে তবে আমি মনে করি এই কোডটি ...

$blocks.each(function(i, elm) {
 $(elm).fadeOut(200, function() {
  $(elm).remove();
 });
}).promise().done( function(){ alert("All was done"); } );

Answer 3

ঠিক আছে, এটি সত্যের পরে কিছুটা হতে পারে, কিন্তু। প্রোমাইজ () এর পরেও আপনি যা অর্জন করবেন তা অর্জন করা উচিত।

প্রতিশ্রুতি দলিল

আমি যে প্রকল্পে কাজ করছি তার একটি উদাহরণ:

$( '.panel' )
    .fadeOut( 'slow')
    .promise()
    .done( function() {
        $( '#' + target_panel ).fadeIn( 'slow', function() {});
    });

:)

Comments

.each ()

— ফিভার

Answer 4

জাভাস্ক্রিপ্ট সিঙ্ক্রোনিকভাবে চলমান, সুতরাং আপনি যা কিছু পরে each()রাখবেন তা শেষ না হওয়া পর্যন্ত চলবে না each()।

নিম্নলিখিত পরীক্ষা বিবেচনা করুন:

var count = 0;
var array = [];

// populate an array with 1,000,000 entries
for(var i = 0; i < 1000000; i++) {
    array.push(i);
}

// use each to iterate over the array, incrementing count each time
$.each(array, function() {
    count++
});

// the alert won't get called until the 'each' is done
//      as evidenced by the value of count
alert(count);

সতর্কতা যখন বলা হয়, গণনা 1000000 এর সমান হবে কারণ সতর্কতাটি শেষ না হওয়া পর্যন্ত চলবে না each()।

Comments

প্রদত্ত উদাহরণে সমস্যাটি হ'ল fadeOut অ্যানিমেশন কাতারে পরে যায় এবং সিঙ্ক্রোনালি কার্যকর হয় না। আপনি যদি কোনও eachঅ্যানিমেশন আলাদাভাবে ব্যবহার করেন এবং প্রতিটি অ্যানিমেশন আলাদাভাবে নির্ধারণ করেন তবে আপনার অ্যানিমেশনের পরে ইভেন্টটি ছড়িয়ে দিতে হবে, প্রতিটি শেষ হওয়ার পরে নয়।

— tvanfosson

@ টানফসন - হ্যাঁ, আমি জানি। লুথার যা অর্জন করতে চায় তার অনুসারে আপনার সমাধানটি (এবং পয়েন্টির) সঠিক পদ্ধতির মতো বলে মনে হচ্ছে। তবে লুথারের মন্তব্যগুলি থেকে ... নিঃসন্দেহে, আমি এলেমস.এইচ (ফু, বার) এর মতো কিছু সন্ধান করছি যেখানে foo = 'প্রতিটি উপাদান প্রয়োগ করা হয়' এবং বার = 'সমস্ত পুনরাবৃত্তি শেষ হওয়ার পরে কলব্যাক'। ... তিনি মনে করেন যে এটি একটি each()বিষয় issue এই কারণেই আমি এই উত্তরটি মিশ্রণে ফেলেছি।

— ব্যবহারকারী 113716

আপনি সঠিক প্যাট্রিক। আমি (ভুল) বুঝতে পেরেছি .এইচ () আমার কলব্যাকগুলি নির্ধারণ বা সারিবদ্ধ ছিল। আমি মনে করি যে বিবর্ণ ফিডআউট অপ্রত্যক্ষভাবে আমাকে সেই সিদ্ধান্তে নিয়ে গেছে। tvanfosson এবং পয়েন্টি উভয় fadeOut সমস্যার জন্য উত্তর সরবরাহ করেছে (যা আমি সত্যিই পরে ছিলাম) তবে আপনার পোস্টটি আসলে আমার বোঝাকে কিছুটা সংশোধন করে। আপনার উত্তরটি মূলত মূল প্রশ্নের উত্তরটি যেমন দেয় ঠিক তেমন উত্তর দেয় যখন পয়েন্টি এবং ট্যাভানফসন আমি যে প্রশ্নটি জিজ্ঞাসার চেষ্টা করছিলাম তার উত্তর দিয়েছিল। আমি আশা করি আমি দুটি উত্তর চয়ন করতে পারে। 'এই উত্তরটি মিশ্রণে ফেলে দেওয়ার জন্য ধন্যবাদ' :)

— লুথার বেকার

@ user113716 আমি ভেবেছিলাম ভিতরে ফাংশনগুলি eachআগে কল করার গ্যারান্টিযুক্ত ছিল না alert। আপনি কি আমাকে এই বিষয়ে পড়তে বা ব্যাখ্যা করতে পারেন?

— ম্যাকিয়েজ জানকোভস্কি

Answer 5

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

var flag1 = flag2 = 0;

$.each( object, function ( i, v ) { flag1++; });

$.each( object, function ( ky, val ) {

     /*
        Your code here
     */
     flag2++;
});

if(flag1 === flag2) {
   your function to call at the end of the iteration
}

যেমনটি আমি বলেছিলাম, এটি সর্বাধিক মার্জিত নয়, তবে এটি কাজ করে এবং এটি ভালভাবে কাজ করে এবং আমি এর চেয়ে ভাল সমাধান এখনও পাইনি।

চিয়ার্স, জেপি

Comments

না এটি কাজ করে না। এটি সমস্ত .each এবং তারপরে চূড়ান্ত জিনিস এবং সমস্ত কিছু একই সাথে চালিত হয়। আপনার .প্রাণীর উপর একটি সেটটাইমআউট রাখার চেষ্টা করুন এবং আপনি দেখতে পাবেন যে এটি ঠিক এখনই পতাকাটি চালাচ্ছে 1 === ফ্ল্যাগ 2

— মাইকেল জ্বর

Answer 6

আপনি যদি এটি কয়েক পদক্ষেপ করতে ইচ্ছুক হন তবে এটি কার্যকর হতে পারে। এটি ক্রমে সমাপ্ত অ্যানিমেশনগুলির উপর নির্ভর করে। আমি মনে করি না যে এটি একটি সমস্যা হওয়া উচিত।

var elems = $(parentSelect).nextAll();
var lastID = elems.length - 1;

elems.each( function(i) {
    $(this).fadeOut(200, function() { 
        $(this).remove(); 
        if (i == lastID) {
           doMyThing();
        }
    });
});

Comments

এটি কার্যকর হবে - যদিও, আমি যা আশা করি তা নয়। সহজভাবে, আমি এলেমসের মতো কিছু খুঁজছি ea আমরা jQuery এর কিছু অন্ধকার কোণ জুড়ে আসে কিনা তা দেখার জন্য আমি প্রশ্নটি আরও কিছুটা সময় দেব :)

— লুথার বাকের

আফাইক - "শেষ" অ্যানিমেশনটি শেষ হওয়ার সাথে সাথে আপনাকে এটি ট্রিগার করতে হবে এবং যেহেতু তারা অবিচ্ছিন্নভাবে চালিত হয়, আপনাকে অ্যানিমেশন কলব্যাকে এটি করতে হবে। আমি @ পয়েন্টির যে সংস্করণটি আরও ভাল লিখেছি তারটি পছন্দ করি কারণ এটির অর্ডারের উপর নির্ভরতা নেই, আমি মনে করি এটি কোনও সমস্যা হবে।

— tvanfosson

Answer 7

কি সম্পর্কে

$(parentSelect).nextAll().fadeOut(200, function() { 
    $(this).remove(); 
}).one(function(){
    myfunction();
}); 

Comments

এটি স্পষ্টতই মাইফ্যাংশনকে () একবার (এবং অন্য জিকুয়ের ধারণার সাথে পরিচয় করিয়ে দেয়) তবে আমি যা খুঁজছিলাম তা 'কখন' চালিত হবে তার গ্যারান্টি ছিল - কেবল এটি একবার চালানো হবে তা নয়। এবং, প্যাট্রিক যেমন উল্লেখ করেছেন, সেই অংশটি খুব সহজ হয়ে গেছে। আমি যা খুঁজছিলাম তা হ'ল শেষ ফেইডআউট লজিকের পরে কিছু চাওয়ার উপায় যা আমি মনে করি না one এক () গ্যারান্টি দেয়।

— লুথার বাকের

আমি মনে করি যে চেইনটি এটি করে - যেহেতু প্রথম অংশটি শেষ অংশের আগে চলে।

— মার্ক স্কুলথিস

Answer 8

এটির কাজ করার জন্য আপনার বাকী অনুরোধটি আপনাকে সারিবদ্ধ করতে হবে।

var elems = $(parentSelect).nextAll();
var lastID = elems.length - 1;

elems.each( function(i) {
    $(this).fadeOut(200, function() { 
        $(this).remove(); 
        if (i == lastID) {
            $j(this).queue("fx",function(){ doMyThing;});
        }
    });
});

Answer 9

আমি একই সমস্যাটি পূরণ করি এবং আমি নিম্নলিখিত কোডের মতো একটি সমাধান দিয়ে সমাধান করেছি:

var drfs = new Array();
var external = $.Deferred();
drfs.push(external.promise());

$('itemSelector').each( function() {
    //initialize the context for each cycle
    var t = this; // optional
    var internal = $.Deferred();

    // after the previous deferred operation has been resolved
    drfs.pop().then( function() {

        // do stuff of the cycle, optionally using t as this
        var result; //boolean set by the stuff

        if ( result ) {
            internal.resolve();
        } else {
            internal.reject();
        }
    }
    drfs.push(internal.promise());
});

external.resolve("done");

$.when(drfs).then( function() {
    // after all each are resolved

});

সমাধানটি নিম্নলিখিত সমস্যার সমাধান করে: ডিফার্ড অবজেক্টটি ব্যবহার করে .each () পুনরাবৃত্তিতে অ্যাসিক্রোনাস অপারেশনগুলি সিঙ্ক্রোনাইজ করতে।

Comments

এর আগে আপনি একটি বন্ধনী বন্ধনী মিস করছেন: drfs.push (অভ্যন্তরীণ.প্রোমিজ ()); কমপক্ষে আমি এর আগে মনে করি ..

— মাইকেল জ্বর

Answer 10

হয়ত দেরিতে সাড়া পেলেও এই https://github.com/ACFBentveld/Await হ্যান্ডেল করার জন্য একটি প্যাকেজ রয়েছে

 var myObject = { // or your array
        1 : 'My first item',
        2 : 'My second item',
        3 : 'My third item'
    }

    Await.each(myObject, function(key, value){
         //your logic here
    });

    Await.done(function(){
        console.log('The loop is completely done');
    });

Answer 11

আমি এই জাতীয় কিছু ব্যবহার করছি:

$.when(
           $.each(yourArray, function (key, value) {
                // Do Something in loop here
            })
          ).then(function () {
               // After loop ends.
          });