'পুনরায় আকার' ইভেন্টের 'শেষ' এর জন্য কীভাবে অপেক্ষা করবেন এবং কেবল তখনই কোনও ক্রিয়া করবেন?

Question

সুতরাং আমি বর্তমানে কিছু ব্যবহার করি:

$(window).resize(function(){resizedw();});

পুনরায় আকার দেওয়ার প্রক্রিয়া চলাকালীন সময়ে এটি ডাকা হয়ে যায়। কোনও ইভেন্ট শেষ হয়ে গেলে কী ধরা সম্ভব?

Comments

.one()সম্ভবত এটি ব্যবহার করে সংযুক্ত করুন যাতে সমস্ত আকার পরিবর্তন করার পরে এটি কার্যকর হয় এবং শেষ ও বেশি হয় না?

— ব্র্যাড ক্রিস্টি

যখন কোনও ব্যবহারকারী কোনও উইন্ডোটিকে ম্যানুয়ালি আকারে এনে দেয় (এটিকে টেনে এনে) পুনরায় আকারের ইভেন্টটিকে একাধিকবার ডাকা হবে, সুতরাং .one () ব্যবহার করা কার্যকরভাবে কার্যকর হবে না।

— জেসেগাভিন

$ (উইন্ডো) .resize (resizedw): উপরে একটি বেনামী ফাংশন ব্যবহার মুছে যেতে পারে, সরলতা ও প্রান্তিক ক্ষিপ্রতা জন্য

— Fornost

এখানে এর জন্য একটি jQuery লাইব্রেরি রয়েছে: github.com/nielse63/jquery.resizeend

— rugk

Answer 1

আমি নিম্নলিখিত প্রস্তাব সঙ্গে ভাগ্য ছিল: http://forum.jquery.com/topic/the-resizeend-event

এখানে কোডটি যাতে আপনাকে তার পোস্টের লিঙ্ক এবং উত্সটি খনন করতে না পারে:

var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

কোডের জন্য sime.vidas ধন্যবাদ!

Comments

কেউ হয়ত তারিখে এমন কিছু পরিবর্তন করতে চায় new Date(-1E12)- যেমন জেএসলিন্ট ব্যবহার সম্পর্কে সতর্ক করে 00।

— elundmark

ধন্যবাদ elundmark। আমি একক 0 টি ব্যবহারের জন্য তারিখ ইনস্ট্যান্টেশন পরিবর্তন করেছি; আশা করি এটি অভিযোগ উত্পন্ন করবে না।

— দোলন অ্যান্টুচি

@ ইউল্ডমার্ক বা ব্যবহার + অপারেশন। rtime: Date; .... if (+new Date() - +rtime < delta)এবং টাইপসক্রিপ্টে পুনরায় আকার ফাংশন এ এর ​​মতো ফাংশন হওয়া উচিত resizeend=()=>। কারণ পুনরায় আকার ফাংশনে thisউইন্ডো অবজেক্টের উল্লেখ।

— মুহাম্মাদ

Answer 2

আপনি ব্যবহার করতে পারেন setTimeout()এবংclearTimeout()

function resizedw(){
    // Haven't resized in 100ms!
}

var doit;
window.onresize = function(){
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

Jsfiddle উপর কোড উদাহরণ ।

Comments

এটি একটি দুর্দান্ত উত্তর। এটি কেবলমাত্র প্লাগইন ব্যতীত আমি প্রস্তাবিত প্লাগইনটি করে does

— জেসেগাভিন

আমি মনে করি এটির উন্নতি করার একমাত্র উপায় হ'ল মাউস চলাচল সনাক্ত করা। আমি সন্দেহ করি যে এটি খনন করলে তা আদায় হবে না।

— মাইকেল হরেন

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

— বদলানো

@ মিশেলহরেন যেহেতু পুনঃ-আকারের হ্যান্ডেলটি সাধারণত বাহিরের বাইরে থাকে তাই $(document)মাউস-সনাক্তকরণটি মাইক্রোসফ্ট উইন্ডোজ চালিত ব্যবহারকারীদের এবং তার ইন্টারনেট এক্সপ্লোরারের দুর্বল সংস্করণগুলির মধ্যেই সীমাবদ্ধ থাকবে: iedataleak.spider.io/demo

— অ্যালেস্টার

এই একটি খুব সহজ বাস্তবায়ন debounce ধারণা ( unscriptable.com/2009/03/20/debouncing-javascript-methods )। পল আইরিশ (এবং অন্যরা) একটি আরও কার্যকর সমাধান উপস্থাপন করেছেন যা 'অপ্রয়োজনীয়' পুনরায় আকারের

— 2009

Answer 3

এই কোডটি আমি @ মার্ক কলম্যানের উত্তর অনুসারে লিখছি:

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        console.log('Resized finished.');
    }, 250);
});

ধন্যবাদ মার্ক!

Comments

চমৎকার অ্যাপ্রোচ। সুপার ভ্যারিয়েবল উইন্ডোতে কোনও পরিবর্তন করা হয়নি এমন পার্থক্যের সাথে এখানেও উল্লেখ করা হয়েছে ।

— অ্যালউইন কেসলার

@ অ্যালউইনকেসার - আপনার উদাহরণে ভেরিয়েবলটি resizeTimerএকটি বৈশ্বিক পরিবর্তনশীল, যার অর্থ এটি কোনও সংজ্ঞায়িত নয় window, সুতরাং এটি এখানে ঠিক একই রকম, কেবলমাত্র এই উদাহরণটি আরও ভাল কারণ আপনার বাহ্যিকভাবে ভেরিয়েবলটি সংজ্ঞায়িত করার দরকার নেই। এবং windowইভেন্টের শ্রোতার সাথে বাঁধাই করা অবজেক্টটি হ'ল বস্তুটিতে এই পরিবর্তনশীলটি যুক্ত করাও অর্থবোধ করে।

— vsync

ধন্যবাদ! কেবল এটি যোগ করতে চেয়েছিলেন যে কিছু ক্ষেত্রে, একটি কলব্যাকে নির্দিষ্ট কাজ সম্পাদনের জন্য একটি দীর্ঘ সময়ের ব্যবধান প্রয়োজন। যেমন আমার ক্ষেত্রে, 250 কাজ করে না, তবে 700 দুর্দান্ত কাজ করেছে worked

— মারিয়া ব্লেয়ার

সর্বোত্তম সমাধান।

— ড্যানিয়েল দেউহার্স্ট

Answer 4

ইন্টারনেট এক্সপ্লোরার একটি আকার পরিবর্তন এবং ইভেন্ট সরবরাহ করে। আপনি ব্রাউজ করার সময় অন্যান্য ব্রাউজারগুলি পুনরায় আকারের ইভেন্টটি ট্রিগার করবে।

এখানে আরও দুর্দান্ত উত্তর রয়েছে যা সেটটাইমআউট এবং। থ্রোটল কীভাবে ব্যবহার করতে হয় তা দেখায় ,.ডোবাশ এবং আন্ডারস্কোর থেকে পদ্ধতিগুলি ঘোষণা করুন, তাই আমি বেন আলমানের থ্রোটল-ডাবনস জিকুয়েরি প্লাগইনটি উল্লেখ করব যা আপনার পরে যা ঘটায় তা পূরণ করে।

মনে করুন আপনার এই ফাংশনটি রয়েছে যা আপনি একটি আকার পরিবর্তন করার পরে ট্রিগার করতে চান:

function onResize() {
  console.log("Resize just happened!");
};

থ্রটলের উদাহরণ
নিম্নলিখিত উদাহরণে onResize()উইন্ডোর পুনরায় আকার দেওয়ার সময় প্রতি 250 মিলিসেকেন্ডে একবার কল করা হবে।

$(window).resize( $.throttle( 250, onResize) );

উদ্বোধনের উদাহরণ
নিম্নলিখিত উদাহরণে, onResize()উইন্ডো পুনরায় আকার দেওয়ার ক্রিয়া শেষে কেবল একবার ডাকা হবে। এটি @ মার্ক তার উত্তরে উপস্থাপন করে একই ফলাফল অর্জন করে।

$(window).resize( $.debounce( 250, onResize) );

Comments

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

— কেভিন ল্যারি

হ্যাঁ, এই উত্তরটি 5 বছর আগে লেখা হয়েছিল। JQuery প্লাগইন দিন থেকে অনেক কিছু ঘটেছে। এখানে একটি ডেভিডওয়ালশ.নেম

— জাভাস্ক্রিপ্ট-

Answer 5

অ্যান্ডসকোর.জেএস ব্যবহার করে একটি দুর্দান্ত সমাধান রয়েছে সুতরাং আপনি যদি এটি আপনার প্রকল্পে ব্যবহার করেন তবে আপনি নিম্নলিখিতটি করতে পারেন -

$( window ).resize( _.debounce( resizedw, 500 ) );

---

এটি পর্যাপ্ত হওয়া উচিত :) তবে, আপনি যদি সে সম্পর্কে আরও পড়তে আগ্রহী হন তবে আপনি আমার ব্লগ পোস্টটি চেক করতে পারেন - http://rifatnabi.com/post/detect-end-of-jquery-resize-event-used-:30core -ডিবিউনস (ডেডলিঙ্ক)

Comments

এটি যুক্ত করতে lodash

— চাইলে

Answer 6

একটি সমাধান একটি ফাংশন সহ jQuery প্রসারিত হয়, উদাহরণস্বরূপ: resized

$.fn.resized = function (callback, timeout) {
    $(this).resize(function () {
        var $this = $(this);
        if ($this.data('resizeTimeout')) {
            clearTimeout($this.data('resizeTimeout'));
        }
        $this.data('resizeTimeout', setTimeout(callback, timeout));
    });
};

নমুনা ব্যবহার:

$(window).resized(myHandler, 300);

Answer 7

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

var loop = setInterval(func, 30);

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

"গ্লোবাল" ভেরিয়েবল ব্যতীত এটি করতে আপনি নিজেই ফাংশনে একটি স্থানীয় ভেরিয়েবল যুক্ত করতে পারেন। উদা:

$(window).resize(function() {
    clearTimeout(this.id);
    this.id = setTimeout(doneResizing, 500);
});

function doneResizing(){
  $("body").append("<br/>done!");   
}

Answer 8

আপনি ব্যবহার করতে পারেন 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/

Answer 9

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

var resizeId;
$(window).resize(function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(resizedEnded, 500);
});

function resizedEnded(){
    ...
}

এবং Angular2 এর সমতুল্য :

private resizeId;
@HostListener('window:resize', ['$event'])
onResized(event: Event) {
  clearTimeout(this.resizeId);
  this.resizeId = setTimeout(() => {
    // Your callback method here.
  }, 500);
}

কৌণিক পদ্ধতির জন্য, সুযোগটি সংরক্ষণের জন্য () => { }স্বরলিপিটি ব্যবহার করুন setTimeout, অন্যথায় আপনি কোনও ফাংশন কল করতে বা ব্যবহার করতে সক্ষম হবেন না this।

Answer 10

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

var rtime = new Date(1, 1, 2000, 12,00,00);
var timeout = false;
var delta = 200;
var windowsize = $window.width();
var windowsizeInitial = $window.width();

$(window).on('resize',function() {
    windowsize = $window.width();
    rtime = new Date();
    if (timeout === false) {
            timeout = true;
            setTimeout(resizeend, delta);
        }
});

function resizeend() {
if (new Date() - rtime < delta) {
    setTimeout(resizeend, delta);
    return false;
} else {
        if (windowsizeInitial > 1000 && windowsize > 1000 ) {
            setTimeout(resizeend, delta);
            return false;
        }
        if (windowsizeInitial < 1001 && windowsize < 1001 ) {
            setTimeout(resizeend, delta);
            return false;
        } else {
            timeout = false;
            location.reload();
        }
    }
    windowsizeInitial = $window.width();
    return false;
}

Answer 11

মার্ক কোলেম্যানের উত্তর অবশ্যই নির্বাচিত উত্তরের চেয়ে অনেক ভাল, তবে আপনি যদি টাইমআউট আইডি ( doitমার্কের উত্তরের পরিবর্তনশীল ) জন্য গ্লোবাল ভেরিয়েবল এড়াতে চান , আপনি নিম্নলিখিতগুলির একটি করতে পারেন:

(1) বন্ধ করার জন্য একটি তাত্ক্ষণিকভাবে অনুরোধ করা ফাংশন এক্সপ্রেশন (IIFE) ব্যবহার করুন।

$(window).resize((function() { // This function is immediately invoked
                               // and returns the closure function.
    var timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function() {
            timeoutId = null; // You could leave this line out.
            // Code to execute on resize goes here.
        }, 100);
    };
})());

(২) ইভেন্ট হ্যান্ডলার ফাংশনের একটি সম্পত্তি ব্যবহার করুন।

$(window).resize(function() {
    var thisFunction = arguments.callee;
    clearTimeout(thisFunction.timeoutId);
    thisFunction.timeoutId = setTimeout(function() {
        thisFunction.timeoutId = null; // You could leave this line out.
        // Code to execute on resize goes here.
    }, 100);
});

Comments

বিকল্প 2, আর্গুমেন্টস ক্যাললি ব্যবহার করে, কার্যটি ES6 থেকে স্থানান্তরিত হলে কাজ করবে না।

— মার্টিন বুর্চ

Answer 12

আমি আমার নিজের উপর একটি লিট্ট র‍্যাপার ফাংশন লিখেছিলাম ...

onResize  =   function(fn) {
    if(!fn || typeof fn != 'function')
        return 0;

    var args    = Array.prototype.slice.call(arguments, 1);

    onResize.fnArr    = onResize.fnArr || [];
    onResize.fnArr.push([fn, args]);

    onResize.loop   = function() {
        $.each(onResize.fnArr, function(index, fnWithArgs) {
            fnWithArgs[0].apply(undefined, fnWithArgs[1]);
        });
    };

    $(window).on('resize', function(e) {
        window.clearTimeout(onResize.timeout);
        onResize.timeout    = window.setTimeout("onResize.loop();", 300);
    });
};

এখানে ব্যবহার:

var testFn  = function(arg1, arg2) {
    console.log('[testFn] arg1: '+arg1);
    console.log('[testFn] arg2: '+arg2);
};

// document ready
$(function() {
    onResize(testFn, 'argument1', 'argument2');
});

Answer 13

(function(){
    var special = jQuery.event.special,
        uid1 = 'D' + (+new Date()),
        uid2 = 'D' + (+new Date() + 1);

    special.resizestart = {
        setup: function() {
            var timer,
                handler =  function(evt) {
                    var _self = this,
                        _args = arguments;
                    if (timer) {
                        clearTimeout(timer);
                    } else {
                        evt.type = 'resizestart';
                        jQuery.event.handle.apply(_self, _args);
                    }

                    timer = setTimeout( function(){
                        timer = null;
                    }, special.resizestop.latency);
                };
            jQuery(this).bind('resize', handler).data(uid1, handler);
        },
        teardown: function(){
            jQuery(this).unbind( 'resize', jQuery(this).data(uid1) );
        }
    };

    special.resizestop = {
        latency: 200,
        setup: function() {
            var timer,
                handler = function(evt) {
                    var _self = this,
                        _args = arguments;
                    if (timer) {
                        clearTimeout(timer);
                    }
                    timer = setTimeout( function(){
                        timer = null;
                        evt.type = 'resizestop';
                        jQuery.event.handle.apply(_self, _args);
                    }, special.resizestop.latency);
                };

            jQuery(this).bind('resize', handler).data(uid2, handler);
        },
        teardown: function() {
            jQuery(this).unbind( 'resize', jQuery(this).data(uid2) );
        }
    };
})();

$(window).bind('resizestop',function(){
    //...
});

Answer 14

ওয়েল, যতটা উইণ্ডো ম্যানেজার সংশ্লিষ্ট হয়, প্রতিটি পুনরায় আকার দেওয়ার ঘটনা নিজস্ব বার্তাটি একটি স্বতন্ত্র আদ্যন্ত সাথে আছেন, তাই টেকনিক্যালি, প্রত্যেক সময় জানালা মাপ পরিবর্তন করা হয়, এটা হয় শেষ।

এটি বলার পরে, সম্ভবত আপনি নিজের ধারাবাহিকতায় বিলম্ব স্থাপন করতে চান? এখানে একটি উদাহরণ।

var t = -1;
function doResize()
{
    document.write('resize');
}
$(document).ready(function(){
    $(window).resize(function(){
        clearTimeout(t);
        t = setTimeout(doResize, 1000);
    });
});

Answer 15

উইন্ডো অবজেক্টে 'রেজিস্টার্ট' এবং 'রেজাইজেন্ড' ইভেন্ট উভয়কেই ট্রিগার করতে এখানে খুব সহজ স্ক্রিপ্ট।

খেজুর এবং সময়গুলি নিয়ে চারপাশে হাঁসফাঁস করার দরকার নেই।

dপরিবর্তনশীল পুনরায় আকার দেওয়ার শেষ ঘটনা triggering সামনে পুনরায় আকার দেওয়ার ইভেন্টের মধ্যে মিলিসেকেন্ড সংখ্যা প্রতিনিধিত্ব করে, আপনি পরিবর্তন করতে কিভাবে সংবেদনশীল শেষ ঘটনা এই সঙ্গে প্লে করতে পারেন।

এই ইভেন্টগুলি শোনার জন্য আপনাকে যা করতে হবে তা হ'ল:

resizestart: $(window).on('resizestart', function(event){console.log('Resize Start!');});

resizeend: $(window).on('resizeend', function(event){console.log('Resize End!');});

(function ($) {
    var d = 250, t = null, e = null, h, r = false;

    h = function () {
        r = false;
        $(window).trigger('resizeend', e);
    };

    $(window).on('resize', function (event) {
        e = event || e;
        clearTimeout(t);

        if (!r) {
            $(window).trigger('resizestart', e);
            r = true;
        }

        t = setTimeout(h, d);
    });
}(jQuery));

Comments

আমার আকারটি পুনরায় আকারের শুরু এবং শেষের দরকার ছিল এবং দেখে মনে হচ্ছে এটি ভালভাবে কাজ করে (ক্রোম, এফএফ, অপেরা এবং আই 11 এ পরীক্ষিত)। পরীক্ষার জন্য আমি আপনার সমাধান সহ একটি জেএসফিডাল তৈরি করেছি: jsfiddle.net/8fsn2joj

— কীথ ডিসি

Answer 16

বারবার ক্রিয়াকলাপে বিলম্ব করার জন্য এটিই আমি ব্যবহার করি এটি আপনার কোডের একাধিক স্থানে কল করা যেতে পারে:

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

ব্যবহার:

$(window).resize(function () { 
   debounce(function() {
          //...
    }, 500);
});

Answer 17

যেহেতু নির্বাচিত উত্তরটি আসলে কাজ করে না .. এবং আপনি যদি jquery ব্যবহার না করেন তবে উইন্ডো রাইজিংয়ের সাহায্যে এটি কীভাবে ব্যবহার করতে হবে তার উদাহরণ সহ একটি সাধারণ থ্রোটল ফাংশন is

    function throttle(end,delta) {

    var base = this;

    base.wait = false;
    base.delta = 200;
    base.end = end;

    base.trigger = function(context) {

        //only allow if we aren't waiting for another event
        if ( !base.wait ) {

            //signal we already have a resize event
            base.wait = true;

            //if we are trying to resize and we 
            setTimeout(function() {

                //call the end function
                if(base.end) base.end.call(context);

                //reset the resize trigger
                base.wait = false;
            }, base.delta);
        }
    }
};

var windowResize = new throttle(function() {console.log('throttle resize');},200);

window.onresize = function(event) {
    windowResize.trigger();
}

Answer 18

এটি আমার পক্ষে কাজ করেছিল কারণ আমি কোনও প্লাগইন ব্যবহার করতে চাই না।

$(window).resize(function() {
    var originalWindowSize = 0;
    var currentWidth = 0;

    var setFn = function () {
        originalWindowSize = $(window).width();
    };

    var checkFn = function () {
        setTimeout(function () {
            currentWidth = $(window).width();
            if (currentWidth === originalWindowSize) {
                console.info("same? = yes") 
                // execute code 
            } else {
                console.info("same? = no"); 
                // do nothing 
            }
        }, 500)
    };
    setFn();
    checkFn();
});

উইন্ডোতে পুনরায় আকারের "setFn" ডাকে যা উইন্ডোটির প্রস্থ পায় এবং "আসল উইন্ডোসাইজ" হিসাবে সংরক্ষণ করে। তারপরে "চেকফএন" কে অনুরোধ করুন যা 500 মিমি (বা আপনার পছন্দ) পরে বর্তমান উইন্ডোর আকার পায় এবং মূলটিকে বর্তমানের সাথে তুলনা করে, যদি সেগুলি একই না হয়, তবে উইন্ডোটি এখনও পুনরায় আকারের করা হচ্ছে। উত্পাদনে কনসোল বার্তাগুলি অপসারণ করতে ভুলবেন না এবং (alচ্ছিক) "সেটএফএন" স্ব সম্পাদন করতে পারে।

Answer 19

var resizeTimer;
$( window ).resize(function() {
    if(resizeTimer){
        clearTimeout(resizeTimer);
    }
    resizeTimer = setTimeout(function() {
        //your code here
        resizeTimer = null;
        }, 200);
    });

এটি ক্রোমে আমি যা করার চেষ্টা করেছিলাম তার জন্য এটি কাজ করেছিল। এটি শেষ পুনরায় আকারের ইভেন্টের 200 মিটার পর্যন্ত কলব্যাক চালিত করবে না।

Answer 20

হালনাগাদ!

আমার দ্বারা নির্মিত আরও ভাল বিকল্পটি এখানে রয়েছে: https://stackoverflow.com/a/23692008/2829600 ("ফাংশনগুলি মুছুন" সমর্থন করে)

মূল পোস্ট:

আমি এই সহজ ফাংশনটি কার্যকর করেছিলাম কার্যকর করতে বিলম্ব হ্যান্ডল করার জন্য, jQuery .scrol () এবং .resize () এর অভ্যন্তরে দরকারী তাই নির্দিষ্ট আইডি স্ট্রিংয়ের জন্য কেবল একবার কলব্যাক_ফ চলবে।

function delay_exec( id, wait_time, callback_f ){

    // IF WAIT TIME IS NOT ENTERED IN FUNCTION CALL,
    // SET IT TO DEFAULT VALUE: 0.5 SECOND
    if( typeof wait_time === "undefined" )
        wait_time = 500;

    // CREATE GLOBAL ARRAY(IF ITS NOT ALREADY CREATED)
    // WHERE WE STORE CURRENTLY RUNNING setTimeout() FUNCTION FOR THIS ID
    if( typeof window['delay_exec'] === "undefined" )
        window['delay_exec'] = [];

    // RESET CURRENTLY RUNNING setTimeout() FUNCTION FOR THIS ID,
    // SO IN THAT WAY WE ARE SURE THAT callback_f WILL RUN ONLY ONE TIME
    // ( ON LATEST CALL ON delay_exec FUNCTION WITH SAME ID  )
    if( typeof window['delay_exec'][id] !== "undefined" )
        clearTimeout( window['delay_exec'][id] );

    // SET NEW TIMEOUT AND EXECUTE callback_f WHEN wait_time EXPIRES,
    // BUT ONLY IF THERE ISNT ANY MORE FUTURE CALLS ( IN wait_time PERIOD )
    // TO delay_exec FUNCTION WITH SAME ID AS CURRENT ONE
    window['delay_exec'][id] = setTimeout( callback_f , wait_time );
}


// USAGE

jQuery(window).resize(function() {

    delay_exec('test1', 1000, function(){
        console.log('1st call to delay "test1" successfully executed!');
    });

    delay_exec('test1', 1000, function(){
        console.log('2nd call to delay "test1" successfully executed!');
    });

    delay_exec('test1', 1000, function(){
        console.log('3rd call to delay "test1" successfully executed!');
    });

    delay_exec('test2', 1000, function(){
        console.log('1st call to delay "test2" successfully executed!');
    });

    delay_exec('test3', 1000, function(){
        console.log('1st call to delay "test3" successfully executed!');
    });

});

/* RESULT
3rd call to delay "test1" successfully executed!
1st call to delay "test2" successfully executed!
1st call to delay "test3" successfully executed!
*/

Comments

আপনি এখানে ব্যবহারের ব্যাখ্যা দিতে পারেন? আপনি এক ইঙ্গিত করা হয় না: $(window).resize(function() { delay_exec('test1', 30, function() { ... delayed stuff here ... }); });? অন্যথায় খুব পরিষ্কার কোড। ভাগ করে নেওয়ার জন্য ধন্যবাদ. :)

— mululse

তুমি রক! ধন্যবাদ @ ডিজন! পুরোপুরি +1 করুন। দুর্দান্ত কোড উদাহরণস্বরূপ, আমি যা পরীক্ষা করেছি তা থেকে এটি খুব ভাল কাজ করে। ব্যবহার সহজ। ভাগ করে নেওয়ার জন্য আবার ধন্যবাদ। :)

— mululse

Answer 21

উইন্ডোটির জন্য পুনরায় আকার এবং স্টোর পুনরায় আকার দিন nd

http://jsfiddle.net/04fLy8t4/

আমি ফাংশনটি প্রয়োগ করেছি যা ব্যবহারকারীর DOM উপাদানটিতে দুটি ইভেন্ট ট্রিগার করে:

1. resizestart
2. resizeend

কোড:

var resizeEventsTrigger = (function () {
    function triggerResizeStart($el) {
        $el.trigger('resizestart');
        isStart = !isStart;
    }

    function triggerResizeEnd($el) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function () {
            $el.trigger('resizeend');
            isStart = !isStart;
        }, delay);
    }

    var isStart = true;
    var delay = 200;
    var timeoutId;

    return function ($el) {
        isStart ? triggerResizeStart($el) : triggerResizeEnd($el);
    };

})();

$("#my").on('resizestart', function () {
    console.log('resize start');
});
$("#my").on('resizeend', function () {
    console.log('resize end');
});

window.onresize = function () {
    resizeEventsTrigger( $("#my") );
};

Answer 22

var flag=true;
var timeloop;

$(window).resize(function(){
    rtime=new Date();
    if(flag){
        flag=false;
        timeloop=setInterval(function(){
            if(new Date()-rtime>100)
                myAction();
        },100);
    }
})
function myAction(){
    clearInterval(timeloop);
    flag=true;
    //any other code...
}

Answer 23

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

var tranStatus = false;
$(window).resizeend(200, function(){
    $(".cat-name, .category").removeAttr("style");
    //clearTimeout(homeResize);
    $("*").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(event) {
      tranStatus = true;
    });
    processResize();
});

function processResize(){
  homeResize = setInterval(function(){
    if(tranStatus===false){
        console.log("not yet");
        $("*").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(event) {
            tranStatus = true;
        }); 
    }else{
        text_height();
        clearInterval(homeResize);
    }
  },200);
}

Answer 24

আমি একটি ফাংশন লিখেছিলাম যা কোনও ফর্মটি পাস করে যখন কোনও পুনরায় আকারের ইভেন্টে মোড়ানো হয়। এটি একটি বিরতি ব্যবহার করে যাতে পুনরায় আকারটি নিয়মিত সময়সীমার ইভেন্ট তৈরি না করে। এটি এটিকে কোনও লগ এন্ট্রি বাদ দিয়ে পুনরায় আকারের ইভেন্টের স্বাধীনভাবে সঞ্চালনের অনুমতি দেয় যা উত্পাদনে সরানো উচিত।

https://github.com/UniWrighte/resizeOnEnd/blob/master/resizeOnEnd.js

        $(window).resize(function(){
            //call to resizeEnd function to execute function on resize end.
    //can be passed as function name or anonymous function
            resizeEnd(function(){



    });

        });

        //global variables for reference outside of interval
        var interval = null;
        var width = $(window).width();
    var numi = 0; //can be removed in production
        function resizeEnd(functionCall){
            //check for null interval
            if(!interval){
                //set to new interval
                interval = setInterval(function(){
        //get width to compare
                    width2 = $(window).width();
        //if stored width equals new width
                    if(width === width2){
                        //clear interval, set to null, and call passed function
                        clearInterval(interval);
                        interval = null; //precaution
                        functionCall();

                    }
        //set width to compare on next interval after half a second
                    width = $(window).width();
                }, 500);

            }else{
                //logging that should be removed in production
                console.log("function call " + numi++ + " and inteval set skipped");

            }

}