জিকুয়েরি: পুনরায় আকার পুনরায় আকার দেওয়ার পরে কেবল পুনরায় ইভেন্টটি কীভাবে কল করবেন?

Question

ব্রাউজার উইন্ডোজগুলির ফিনিশড পুনরায় আকার দেওয়ার পরে আমি কীভাবে একটি ফাংশন কল করব?

আমি এটি এর মতো করার চেষ্টা করছি তবে সমস্যা হচ্ছে। আমি জিকুয়েরি রাইজ ইভেন্ট ইভেন্ট ফাংশনটি ব্যবহার করছি:

$(window).resize(function() {
  ... // how to call only once the browser has FINISHED resizing?
});

তবে ব্যবহারকারী যদি ব্রাউজার উইন্ডোটিকে ম্যানুয়ালি মাপ দেয় তবে এই ফাংশনটি অবিচ্ছিন্নভাবে বলা হয়। যার অর্থ, এটি সংক্ষিপ্ত বিরতিতে কয়েক হাজার বার এই ফাংশনটিকে কল করতে পারে।

আমি পুনরায় আকার দেওয়ার ফাংশন শুধুমাত্র কিভাবে কল করতে পারেন একটি একক সময় (একবার ব্রাউজার উইন্ডোতে সমাপ্ত পুনরায় আকার দেওয়া হয়েছে)?

হালনাগাদ

এছাড়াও গ্লোবাল ভেরিয়েবল ব্যবহার না করে।

Comments

@ বিগ্রিসেন, যদি আপনি কীভাবে আমাকে বিশ্বব্যাপী পরিবর্তনশীল না করে jsfiddle.net/Zevan/c9UE5/1 করতে পারেন তা আমি অবশ্যই

— জানাব

উপরের ক্লিয়ারটাইমআউট / সেটটাইমআউট পদ্ধতিটি দুর্দান্তভাবে দুর্দান্তভাবে কাজ করে।

— kris-o3

জাভাস্ক্রিপ্ট / জিকুয়েরির

— এভিলডিআর

Answer 1

এখানে jh নির্দেশাবলী ব্যবহার করে একটি উদাহরণ

আপনি যে কোনও সেটআইন্টারওয়াল বা সেটটাইমআউটে রেফারেন্স আইডি সঞ্চয় করতে পারেন। এটার মত:

var loop = setInterval(func, 30);

// some time later clear the interval
clearInterval(loop);

Comments

আমি পছন্দ করি যে এই কোডটি এত সহজ। গ্লোবাল ভেরিয়েবল ব্যবহার না করেই এই কাজটি করার কোনও উপায় ?

— নিকব

গ্লোবাল ভেরিয়েবল ব্যতীত কীভাবে এটি করতে হয় তা যদি আমি দেখতে পাই তবে আমি এটি "গৃহীত উত্তর" করব

— নিকব

সমস্যা নেই. কয়েকটি উপায় আছে। আমি ভাবতে পারি এমন সহজতম প্রতিফলনের জন্য আমি উত্তরটি সম্পাদনা করেছি।

— Zevan

আপডেটের জন্য ধন্যবাদ তবে এটি এখনও একটি বিশ্বব্যাপী চলক ব্যবহার করে বলে মনে হচ্ছে। কোনও বৈশ্বিক ভেরিয়েবল (ভ্যার আইডি) না লাগতে আপনি কি এটি আপডেট করতে পারেন? ধন্যবাদ

— নিকব

আমি মনে করি আপনি পোস্টটির শেষে লিঙ্কটি মিস করেছেন ... এটি দেখুন: jsfiddle.net/Zevan/c9UE5/5

— জেভান

Answer 2

আত্মপ্রকাশ ।

function debouncer( func , timeout ) {
   var timeoutID , timeout = timeout || 200;
   return function () {
      var scope = this , args = arguments;
      clearTimeout( timeoutID );
      timeoutID = setTimeout( function () {
          func.apply( scope , Array.prototype.slice.call( args ) );
      } , timeout );
   }
}


$( window ).resize( debouncer( function ( e ) {
    // do stuff 
} ) );

দ্রষ্টব্য, আপনি যে কোনও কিছুর (মূল ইভেন্টগুলি ইত্যাদি) ডাবনো করতে চান তার জন্য আপনি এই পদ্ধতিটি ব্যবহার করতে পারেন।

অনুকূল পছন্দসই প্রভাবের জন্য টাইমআউট প্যারামিটারটি সজ্জিত করুন।

Comments

আমি এটি চালানোর চেষ্টা করেছি এবং এটি দুটি চালানোর জন্য মনে হচ্ছে । আমি "do (" বডি ") দিয়ে " // ডু স্টাফ " প্রতিস্থাপন করেছি app সংযোজন (" <br/> সম্পন্ন! ");" এবং এটি এটিকে একটি ব্রাউজারের

— আকারে TWICE বলে

ওহো ... আমি একটি গুরুত্বপূর্ণ অংশটি ভুলে গেছি (আসলে টাইমআউটআইডি সেট করা) ... এখন ঠিক করা হয়েছে, দয়া করে আবার চেষ্টা করুন;)

— বিজিরিসসেন

@ ইউজার ৪34৩৯৩: এটি funcআভ্যন্তরীণ thisপয়েন্টারটির দিকে ইশারা করে scope, এবং আর্গুমেন্ট হিসাবে Array.prototype.slice.call(args)(যা একটি স্ট্যান্ডার্ড অ্যারে উত্পন্ন করে args) সাথে কুনশনকে ডেকেছে

— এরিক

এটি একটি পুনঃব্যবহারযোগ্য বিমূর্ততা, সুতরাং আপনাকে হ্যান্ডকোড সময়সামগ্রী বা গ্লোবাল টাইমআউটআইডি নিজেই ট্র্যাক রাখতে হবে না। আপনি এটিকে আরও বেশি মাত্রায় ব্যবহার করতে পারেন তবে কেবল উইন্ডো আকার পরিবর্তন করুন;) উদাহরণস্বরূপ একটি উচ্চতর টাইমআউট প্যারামিটারটি পাস করে সাবমিট বোতামটি ডাবনো করতে। আপনি কম কোড সমাধানের বিকল্প বেছে নিতে পারেন, তবে আমি আপনাকে এই স্নিপেটটি আপনার কিটে রাখার পরামর্শ দিচ্ছি, আপনি পরে এটির প্রশংসা করবেন;)

— বিজিরিসেন

আপনি যদি ইতিমধ্যে এই lib ব্যবহার করেন তবে অ্যান্ডসোর.জেএস এর একটি দুর্দান্ত বাস্তবায়ন রয়েছে। underscorejs.org/#debounce

— twmulloy

Answer 3

আপনি ব্যবহার করতে পারেন setTimeout()এবং clearTimeout()এর সাথে একত্রে jQuery.data:

$(window).resize(function() {
    clearTimeout($.data(this, 'resizeTimer'));
    $.data(this, 'resizeTimer', setTimeout(function() {
        //do something
        alert("Haven't resized in 200ms!");
    }, 200));
});

হালনাগাদ

আমি jQuery এর ডিফল্ট (& ) - আগস্ট-হ্যান্ডলার বাড়াতে একটি এক্সটেনশন লিখেছি । ইভেন্টটি যদি কোনও নির্দিষ্ট বিরতির জন্য ট্রিগার না করা হয় তবে নির্বাচিত উপাদানগুলিতে এটি এক বা একাধিক ইভেন্টের জন্য ইভেন্ট হ্যান্ডলার ফাংশন সংযুক্ত করে। আপনি যদি পুনরায় আকার পরিবর্তন ইভেন্টের মতো, বিলম্বের পরে কেবল কোনও কলব্যাক চালাতে চান তবে এটি কার্যকর। https://github.com/yckart/jquery.unevent.jsonbind

;(function ($) {
    var methods = { on: $.fn.on, bind: $.fn.bind };
    $.each(methods, function(k){
        $.fn[k] = function () {
            var args = [].slice.call(arguments),
                delay = args.pop(),
                fn = args.pop(),
                timer;

            args.push(function () {
                var self = this,
                    arg = arguments;
                clearTimeout(timer);
                timer = setTimeout(function(){
                    fn.apply(self, [].slice.call(arg));
                }, delay);
            });

            return methods[k].apply(this, isNaN(delay) ? arguments : args);
        };
    });
}(jQuery));

এটিকে অন্য যে কোনও onবা bindআগস্ট হ্যান্ডলারের মতো ব্যবহার করুন , আপনি শেষ হিসাবে অতিরিক্ত প্যারামিটারটি পাস করতে পারেন তা বাদ দিয়ে:

$(window).on('resize', function(e) {
    console.log(e.type + '-event was 200ms not triggered');
}, 200);

http://jsfiddle.net/ARTsinn/EqqHx/

Comments

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

— ডাস্টিন সিল্ক

Answer 4

var lightbox_resize = false;
$(window).resize(function() {
    console.log(true);
    if (lightbox_resize)
        clearTimeout(lightbox_resize);
    lightbox_resize = setTimeout(function() {
        console.log('resize');
    }, 500);
});

Comments

আমি এটি সবচেয়ে পছন্দ করি তবে কেন আপনার শর্তাধীন বিবৃতিতে কোঁকড়া বন্ধনী ব্যবহার করবেন না? আমি জানি এটি তাদের ছাড়া কাজ করে তবে অন্য

— দেবদেবীদের

Answer 5

কেবল উপরেরটি যুক্ত করার জন্য, অযাচিত আকারের ইভেন্টগুলি পাওয়া সাধারণ কারণ স্ক্রোল বারগুলি পপ-ইন করে আউট করে চলে যাওয়ায় এড়াতে এখানে কিছু কোড দেওয়া হল:

function registerResize(f) {
    $(window).resize(function() {
        clearTimeout(this.resizeTimeout);
        this.resizeTimeout = setTimeout(function() {
            var oldOverflow = document.body.style.overflow;
            document.body.style.overflow = "hidden";
            var currHeight = $(window).height(),
                currWidth = $(window).width();
            document.body.style.overflow = oldOverflow;

            var prevUndefined = (typeof this.prevHeight === 'undefined' || typeof this.prevWidth === 'undefined');
            if (prevUndefined || this.prevHeight !== currHeight || this.prevWidth !== currWidth) {
                //console.log('Window size ' + (prevUndefined ? '' : this.prevHeight + "," + this.prevWidth) + " -> " + currHeight + "," + currWidth);
                this.prevHeight = currHeight;
                this.prevWidth = currWidth;

                f(currHeight, currWidth);
            }
        }, 200);
    });
    $(window).resize(); // initialize
}

registerResize(function(height, width) {
    // this will be called only once per resize regardless of scrollbars changes
});

দেখতে jsfiddle

Answer 6

অ্যান্ডস্কোর.জেএস এর এই কাজের জন্য বেশ কয়েকটি দুর্দান্ত পদ্ধতি রয়েছে: throttleএবং debounce। এমনকি আপনি অ্যান্ডস্কোর ব্যবহার করছেন না, এই ফাংশনগুলির উত্সটি একবার দেখুন। এখানে একটি উদাহরণ:

var redraw = function() {'redraw logic here'};
var debouncedRedraw = _.debounce(redraw, 750);
$(window).on('resize', debouncedRedraw);

Answer 7

এটি আমার পদ্ধতি:

document.addEventListener('DOMContentLoaded', function(){
    var tos = {};
    var idi = 0;
    var fn  = function(id)
    {
        var len = Object.keys(tos).length;

        if(len == 0)
            return;

        to = tos[id];
        delete tos[id];

        if(len-1 == 0)
            console.log('Resize finished trigger');
    };

    window.addEventListener('resize', function(){
        idi++;
        var id = 'id-'+idi;
        tos[id] = window.setTimeout(function(){fn(id)}, 500);
    });
});

পুনরায় আকার-ইভেন্ট-শ্রোতা সমস্ত আগত পুনরায় আকার কলগুলি ক্যাচ করে, প্রত্যেকের জন্য একটি টাইমআউট-ফাংশন তৈরি করে এবং টাইরেআউট -শনাক্তকারীকে বারে বারে বারে- 'id-'অ্যারেতে (অ্যারে কী হিসাবে ব্যবহারযোগ্য হতে পারে) tosপ্রেন্ডেন্ট করে সংরক্ষণ করে।

প্রতিবার, টাইমআউটটি ট্রিগার করে, এটি fnফাংশন বলে, যাচাই করে, যদি এটি tosঅ্যারের মধ্যে শেষ সময়সীমা হয় (fn- ফাংশন প্রতিটি নির্বাহিত টাইমআউট মোছা)। যদি সত্য হয় (= if(len-1 == 0)), আকার পরিবর্তন করা সমাপ্ত।

Comments

আপনি এখানে কী করছেন সে সম্পর্কে আপনার কিছু মন্তব্য বা ব্যাখ্যা থাকলে ভাল লাগবে

— ব্রেট গ্রেগসন

Answer 8

jQuery offইভেন্ট হ্যান্ডলার সরানোর জন্য একটি পদ্ধতি সরবরাহ করে

$(window).resize(function(){
    if(magic == true) {
        $(window).off('resize', arguments.callee);
    }
});