'आकार' घटना के 'अंत' की प्रतीक्षा कैसे करें और उसके बाद ही कोई कार्रवाई करें?

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)- जैसे कि JSLint उपयोग करने के बारे में चेतावनी देता है 00।

— elundmark

एल्कमार्क का शुक्रिया। मैंने सिंगल 0 का उपयोग करने के लिए डेट इंस्टेंटेशन स्विच किया है; उम्मीद है कि शिकायत उत्पन्न नहीं होगी।

— डोलन एंटेनुची

@elundmark या उपयोग + ऑपरेशन। rtime: Date; .... if (+new Date() - +rtime < delta)और टाइपस्क्रिप्ट आकार बदलने वाले फ़ंक्शन में इस तरह से तीर फ़ंक्शन होना चाहिए resizeend=()=>। क्योंकि 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

यह एक बेहतरीन जवाब है। यह वही करता है जो मैंने सुझाए गए प्लगइन को करता है, केवल एक प्लगइन के बिना।

— जेसेगैविन

मुझे लगता है कि वास्तव में इसे सुधारने का एकमात्र तरीका माउस आंदोलन का पता लगाना है। मुझे संदेह है कि इसमें खुदाई करने पर भुगतान नहीं होगा, हालांकि।

— माइकल हरेन

क्या यह केवल तभी काम करता है जब आकार एक सेकंड के भीतर समाप्त हो जाता है? जब मैं इसका उपयोग करने की कोशिश कर रहा था तब मेरा कार्य शुरू हो रहा था (मैं धीमा था w / मेरी विंडो आकार परिवर्तन हालांकि)

— Dolan Antenucci

@MichaelHaren जैसा कि री-साइज़ हैंडल आम तौर पर बाहर होता है $(document), माउस-डिटेक्शन माइक्रोसॉफ्ट विंडोज चलाने वाले उपयोगकर्ताओं और उसके इंटरनेट एक्सप्लोरर के कमजोर संस्करणों तक सीमित होगा: iedataleak.spider.io/demo

— एलेस्टेयर

इस का एक बहुत ही सरल कार्यान्वयन है debounce अवधारणा ( unscriptable.com/2009/03/20/debouncing-javascript-methods )। पॉल आयरिश (और अन्य) ने बहुत अधिक कुशल समाधान प्रस्तुत किया है जो 'अनावश्यक' आकार परिवर्तन की घटनाओं को नहीं संभाल रहा है: paulirish.com/2009/throttled-smartresize-jquery-event-handler

— rmoestv

Answer 3

यह वह कोड है जो मैं @Mark कोलमैन उत्तर के अनुसार लिखता हूं:

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

धन्यवाद मार्क!

Comments

अच्छी स्वीकृति है। यहां इस अंतर का भी उल्लेख किया गया है कि सुपर वैरिएबल विंडो में कोई संशोधन नहीं किया गया है।

— एल्विन केस्लर

@AlwinKesler - आपके उदाहरण में वैरिएबल resizeTimerएक वैरिएबल वैरिएबल है, जिसका अर्थ है कि इसे कोई परिभाषित नहीं किया गया है window, इसलिए यह बिल्कुल यहां के समान है, केवल यह उदाहरण बेहतर है क्योंकि आपको बाहरी रूप से वैरिएबल को परिभाषित करने की आवश्यकता नहीं है। और यह भी इस चर को windowवस्तु में जोड़ने के लिए समझ में आता है क्योंकि वह वस्तु है जिसे श्रोता को बाँध दिया जाता है।

— vsync

धन्यवाद! बस यह जोड़ना चाहता था कि कुछ मामलों में, कॉलबैक में कुछ कार्यों को करने के लिए एक लंबे समय के अंतराल की आवश्यकता होती है। मेरे मामले में, 250 काम नहीं किया, लेकिन 700 महान काम किया।

— मारिया ब्लेयर

सबसे अच्छा समाधान।

— डैनियल डेहर्स्ट

Answer 4

Internet Explorer एक resizeEnd ईवेंट प्रदान करता है । जब आप आकार बदल रहे हों, तो अन्य ब्राउज़र कई बार रिसाइज़ घटना को ट्रिगर करेंगे।

यहाँ अन्य शानदार उत्तर हैं जो बताते हैं कि सेटटाइमआउट और .throttle का उपयोग कैसे करें ,लॉडश और अंडरस्कोर से तरीकों का उपयोग करें, इसलिए मैं बेन अल्मन के थ्रॉटल-डेब्यू jQuery प्लगइन का उल्लेख करूंगा जो कि आपके बाद क्या है।

मान लीजिए कि आपके पास यह फ़ंक्शन है जिसे आप आकार बदलने के बाद ट्रिगर करना चाहते हैं:

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

थ्रॉटल उदाहरण
निम्नलिखित उदाहरण में, onResize()एक बार विंडो आकार बदलने के दौरान प्रत्येक 250 मिलीसेकंड पर एक बार कहा जाएगा।

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

उदाहरण उदाहरण
निम्नलिखित उदाहरण में, onResize()केवल एक बार एक विंडो के अंत में कॉल किया जाएगा जो कार्रवाई का आकार देता है। यह उसी परिणाम को प्राप्त करता है जो @Mark अपने उत्तर में प्रस्तुत करता है।

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

Comments

लॉडाश यहां भी उपयोगी है, जिसमें _.थ्रोटल और _.debounce विधियां भी हैं। मुझे लगता है कि उपर्युक्त स्वीकृत उदाहरण की तुलना में बहस एक बेहतर तरीका है।

— केविन लेरी

हाँ, यह उत्तर 5 साल पहले लिखा गया था। JQuery प्लगइन दिनों के बाद से बहुत कुछ हुआ है। यहाँ एक स्वसंपूर्ण विवादास्पद

— jessegavin

Answer 5

Underscore.js का उपयोग करके एक सुंदर समाधान है , इसलिए यदि आप इसे अपनी परियोजना में उपयोग कर रहे हैं, तो आप निम्नलिखित कर सकते हैं -

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

---

यह पर्याप्त होना चाहिए :) लेकिन, यदि आप उस पर और अधिक पढ़ने के लिए इच्छुक हैं, तो आप मेरे ब्लॉग पोस्ट की जांच कर सकते हैं - http://rifatnabi.com/post/detect-end-of-jquery-resize-event-use-underscore -Debounce (डेडलिंक)

Comments

बस lodashयह जोड़ना चाहते हैं कि यह भी प्रदान करें

— vsync

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

आप किसी भी setInterval या setTimeout में संदर्भ आईडी स्टोर कर सकते हैं। ऐशे ही:

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

यह ऊपर दिए गए Dolan के कोड का एक संशोधन है, मैंने एक फीचर जोड़ा है जो आकार को आकार के प्रारंभ में विंडो के आकार की जाँच करता है और इसे आकार के अंत में आकार से तुलना करता है, यदि आकार मार्जिन से बड़ा या छोटा है (आदि) उदा। 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);
    };
})());

(2) ईवेंट हैंडलर फ़ंक्शन की एक संपत्ति का उपयोग करें।

$(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, तर्कों का उपयोग करते हुए। यदि ईएस 6 से फ़ंक्शन ट्रांसप्लान्ड है, तो काम नहीं करेगा।

— मार्टिन बर्च

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चर आकार अंत ईवेंट सक्रिय करने से पहले आकार घटनाओं बीच मिलीसेकंड की संख्या का प्रतिनिधित्व करता है, तो आप को बदलने का तरीका संवेदनशील अंत घटना है इस के साथ खेल सकते हैं।

इन घटनाओं को सुनने के लिए आपको बस इतना करना है:

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 में परीक्षण)। परीक्षण के लिए मैंने आपके समाधान के साथ एक JSField बनाया: jsfiddle.net/8fsn2joj

— Keith DC

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 का उपयोग नहीं कर रहे हैं, तो यह एक सरल थ्रॉटल फ़ंक्शन है, जिसका उदाहरण यह है कि इसे खिड़की के आकार के साथ कैसे उपयोग किया जाए

    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" पर क्लिक करें जो विंडो की चौड़ाई प्राप्त करता है और "ओरिजिनलवॉइज़" के रूप में सेव करता है। फिर "checkFn" को लागू करें जो 500ms (या आपकी वरीयता) के बाद वर्तमान विंडो का आकार प्राप्त करता है, और मूल की वर्तमान से तुलना करता है, यदि वे समान नहीं हैं, तो विंडो अभी भी पुन: आकार ले रही है। उत्पादन में कंसोल संदेशों को हटाने के लिए मत भूलना, और (वैकल्पिक) "सेटफ़न" स्वयं निष्पादित कर सकता है।

Answer 19

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

यह वह काम करता है जो मैं क्रोम में करने की कोशिश कर रहा था। यह अंतिम पुनरीक्षण घटना के बाद 200ms तक कॉलबैक को आग नहीं देगा।

Answer 20

अपडेट करें!

मेरे द्वारा बनाया गया बेहतर विकल्प यहाँ है: https://stackoverflow.com/a/23692008/2829600 ("कार्यों को हटाएं" का समर्थन करता है)

मूल पोस्ट:

मैंने निष्पादन में देरी से निपटने के लिए यह सरल कार्य लिखा था, जो jQuery के अंदर उपयोगी है।। कैरोल () और .resize () इसलिए callback_f विशिष्ट आईडी स्ट्रिंग के लिए केवल एक बार चलेगा।

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। कूल कोड उदाहरण, यह बहुत अच्छी तरह से काम करता है जो मैंने परीक्षण किया है। उपयोग करने के लिए सरल, भी। साझा करने के लिए फिर से धन्यवाद। :)

— mhulse

Answer 21

ResizeStart और विंडो के लिए ResizeEnd ईवेंट

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

मुझे नहीं पता कि अन्य के लिए मेरा कोड काम है लेकिन यह वास्तव में मेरे लिए बहुत अच्छा काम है। मुझे यह विचार Dolan Antenucci कोड का विश्लेषण करके मिला क्योंकि उनका संस्करण मेरे लिए काम नहीं कर रहा है और मुझे उम्मीद है कि यह किसी के लिए उपयोगी होगा।

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

            }

}