Jak czekać na „koniec” zdarzenia „zmiana rozmiaru” i dopiero wtedy wykonać akcję?


243

Więc obecnie używam czegoś takiego:

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

Ale jest to wywoływane wiele razy podczas procesu zmiany rozmiaru. Czy można złapać wydarzenie, gdy się skończy?


Może dołącz za pomocą, .one()aby działało tylko po zakończeniu zmiany rozmiaru, a nie w kółko?
Brad Christie

5
Gdy użytkownik ręcznie zmienia rozmiar okna (przeciągając je), zdarzenie zmiany rozmiaru będzie wywoływane więcej niż jeden raz, więc użycie .one () naprawdę nie będzie skuteczne.
jessegavin

Użycie powyższej anonimowej funkcji można usunąć, dla uproszczenia i marginalnej szybkości: $ (okno) .resize (resizedw)
Fornost

Oto biblioteka jQuery do tego: github.com/nielse63/jquery.resizeend
rugk

Odpowiedzi:


177

Miałem szczęście z następującą rekomendacją: http://forum.jquery.com/topic/the-resizeend-event

Oto kod, więc nie musisz przekopywać linku i źródła jego postu:

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

Dzięki sime.vidas za kod!


1
Ktoś może chcieć zmienić datę na coś podobnego new Date(-1E12)- tzn. JSLint ostrzega przed użyciem 00.
elundmark

Dziękuję Elundmark. Zmieniłem instancję daty, aby używać pojedynczych zer; mam nadzieję, że nie spowoduje to reklamacji.
Dolan Antenucci

@elundmark lub użyj + operacji. rtime: Date; .... if (+new Date() - +rtime < delta)a w funkcji zmiany rozmiaru maszynopisu powinna być taka funkcja strzałkiresizeend=()=> . Ponieważ w funkcji zmiany rozmiaru thisodwołanie do obiektu okna.
Muhammet Can TONBUL

517

Możesz użyć setTimeout()iclearTimeout()

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

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

Przykład kodu na jsfiddle .


7
To świetna odpowiedź. Działa tak, jak zalecana przeze mnie wtyczka, tylko bez wtyczki.
jessegavin

Myślę, że jedynym sposobem, aby to naprawdę poprawić, jest wykrycie ruchu myszy. Podejrzewam jednak, że wkopanie się w to by się nie opłaciło.
Michael Haren

Czy to działa tylko wtedy, gdy zmiana rozmiaru zostanie zakończona w ciągu sekundy? Moja funkcja była wyzwalana, kiedy próbowałem tego użyć (byłem wolny, ale
zmieniłem

@MichaelHaren Ponieważ uchwyt zmiany rozmiaru jest na ogół poza $(document), wykrywanie myszy byłoby ograniczone do użytkowników z systemem Microsoft Windows i wrażliwymi wersjami jego przeglądarki Internet Explorer: iedataleak.spider.io/demo
Alastair

12
Jest to bardzo prosta implementacja koncepcji debounce ( unscriptable.com/2009/03/20/debouncing-javascript-methods ). Paul Irish (i inni) przedstawił znacznie bardziej wydajne rozwiązanie, które nie obsługuje „niepotrzebnych” zdarzeń zmiany rozmiaru: paulirish.com/2009/throttled-smartresize-jquery-event-handler
rmoestl

78

Oto kod, który piszę zgodnie z odpowiedzią @Mark Coleman:

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

Dzięki Mark!


1
Niezły aprobata. Wspomniał również tutaj , z tą różnicą, że żadne modyfikacje super zmiennej okna są wykonane.
Alwin Kesler

2
@AlwinKesler - w twoim przykładzie zmienna resizeTimerjest zmienną globalną, co oznacza, że ​​nie jest zdefiniowana window, więc jest dokładnie taka sama jak tutaj, tylko ten przykład jest lepszy, ponieważ nie musisz definiować zmiennej zewnętrznie. i sensowne jest również dodanie tej zmiennej do windowobiektu, ponieważ jest to obiekt, z którym powiązany jest detektor zdarzeń.
vsync

1
Dzięki! Chciałem tylko dodać, że w niektórych przypadkach potrzebny jest dłuższy przedział czasu, aby wykonać określone zadania w trybie oddzwaniania. Np. W moim przypadku 250 nie działało, ale 700 działało świetnie.
Maria Blair,

Najfajniejsze rozwiązanie.
Daniel Dewhurst,

36

Internet Explorer zapewnia zdarzenie resizeEnd . Inne przeglądarki wyzwalają zdarzenie zmiany rozmiaru wiele razy podczas zmiany rozmiaru.

Są tutaj inne świetne odpowiedzi, które pokazują, jak używać setTimeout i .throttle ,.debounce metody z lodash i podkreślenia, więc będę wspomnieć Ben Alman za przepustnicę-nieczułości jQuery plugin , który realizuje to, czego szukasz.

Załóżmy, że masz tę funkcję, którą chcesz uruchomić po zmianie rozmiaru:

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

Przykład przepustnicy
W poniższym przykładzie onResize()będzie wywoływana tylko raz na 250 milisekund podczas zmiany rozmiaru okna.

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

Przykład odbicia
W poniższym przykładzie onResize()zostanie wywołany tylko raz na końcu akcji zmiany rozmiaru okna. Osiąga to ten sam wynik, który @Mark przedstawia w swojej odpowiedzi.

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

1
Przydatny jest także Lodash, który ma również metody _.throttle i _.debounce. Myślę, że debounce jest lepszym podejściem w porównaniu do powyższego przyjętego przykładu.
Kevin Leary

1
Tak, ta odpowiedź została napisana ponad 5 lat temu. Wiele się wydarzyło od czasów wtyczek jQuery. Oto samodzielna funkcja debounce
jessegavin


10

Jednym z rozwiązań jest rozszerzenie jQuery o funkcję, np .: 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));
    });
};

Przykładowe użycie:

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


7

Możesz przechowywać identyfikator odwołania do dowolnego setInterval lub setTimeout. Lubię to:

var loop = setInterval(func, 30);

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

Aby to zrobić bez zmiennej „globalnej”, możesz dodać zmienną lokalną do samej funkcji. Dawny:

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

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

4

Można używać setTimeout()i clearTimeout()w połączeniu z jQuery.data:

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

Aktualizacja

Napisałem rozszerzenie, aby ulepszyć domyślną on(& bind) -event-handler jQuery . Dołącza funkcję obsługi zdarzenia dla jednego lub więcej zdarzeń do wybranych elementów, jeśli zdarzenie nie zostało wyzwolone dla danego interwału. Jest to przydatne, jeśli chcesz uruchomić oddzwonienie dopiero po opóźnieniu, takim jak zdarzenie zmiany rozmiaru lub inne. https://github.com/yckart/jquery.unevent.js

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

Używaj go jak każdego innego onlub bind-event obsługi, z tym wyjątkiem, że możesz przekazać dodatkowy parametr jako ostatni:

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

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


3

Istnieje znacznie prostsza metoda wykonania funkcji na końcu zmiany rozmiaru niż obliczenie czasu delta między dwoma wywołaniami, po prostu zrób to w następujący sposób:

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

function resizedEnded(){
    ...
}

I odpowiednik Angular2 :

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

W przypadku metody kątowej użyj () => { }zapisu w, setTimeoutaby zachować zakres, w przeciwnym razie nie będziesz w stanie wykonywać żadnych wywołań funkcji ani ich używać this.


2

Jest to modyfikacja powyższego kodu Dolana, dodałem funkcję, która sprawdza rozmiar okna na początku zmiany rozmiaru i porównuje go z wielkością na końcu zmiany rozmiaru, jeśli rozmiar jest większy lub mniejszy niż margines ( np. 1000), a następnie przeładowuje.

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

2

Odpowiedź Marka Colemana jest zdecydowanie lepsza niż wybrana odpowiedź, ale jeśli chcesz uniknąć zmiennej globalnej dla identyfikatora limitu czasu ( doit zmiennej w odpowiedzi Marka), możesz wykonać jedną z następujących czynności:

(1) Użyj natychmiast wywołanego wyrażenia funkcyjnego (IIFE), aby utworzyć zamknięcie.

$(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) Użyj właściwości funkcji obsługi zdarzeń.

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

Opcja 2, wykorzystująca arguments.callee, nie będzie działać, jeśli funkcja zostanie przetransponowana z ES6.
Martin Burch,

1

sam napisałem funkcję owijania litte ...

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

Oto użycie:

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

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

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

1

Cóż, jeśli chodzi o menedżera okien, każde zdarzenie zmiany rozmiaru jest własnym komunikatem, z wyraźnym początkiem i końcem, więc technicznie rzecz biorąc, za każdym razem, gdy zmienia się rozmiar okna, jest to koniec.

Powiedziawszy to, może chcesz opóźnić swoją kontynuację? Oto przykład.

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

1

Oto BARDZO prosty skrypt, który wyzwala zarówno zdarzenie „resizestart”, jak i „resizeend” na obiekcie okna.

Nie ma potrzeby marnowania czasu i dat.

The dZmienna reprezentuje liczbę milisekund między zdarzenia zmiany rozmiaru przed wywołaniem zdarzenia zakończenia zmiany rozmiaru, można grać z tym, aby zmienić sposób wrażliwy zdarzenie koniec jest.

Aby wysłuchać tych wydarzeń, wystarczy:

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

zmiana rozmiaru: $(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));

1
Potrzebowałem początku i końca zmiany rozmiaru, i wygląda na to, że działa dobrze (testowane w Chrome, FF, Opera i IE11). Do testów stworzyłem JSFiddle z twoim rozwiązaniem: jsfiddle.net/8fsn2joj
Keith DC

1

To jest to, czego używam do opóźniania powtarzających się działań, można je wywołać w wielu miejscach w kodzie:

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

Stosowanie:

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

0

ponieważ wybrana odpowiedź tak naprawdę nie działała .. a jeśli nie używasz jquery, tutaj jest prosta funkcja przepustnicy z przykładem użycia jej przy zmianie rozmiaru okna

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

0

działało to dla mnie, ponieważ nie chciałem używać żadnych wtyczek.

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

Przy ponownym rozmiarze okna wywołaj „setFn”, który pobierze szerokość okna i zapisz jako „originalWindowSize”. Następnie wywołaj „checkFn”, który po 500 ms (lub twoich preferencjach) pobiera bieżący rozmiar okna i porównuje oryginał z bieżącym, jeśli nie są one takie same, wówczas okno jest ponownie zmieniane. Nie zapomnij usunąć komunikatów konsoli podczas produkcji, a (opcjonalnie) samoczynnie uruchomi się „setFn”.


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

To działało dla tego, co próbowałem zrobić w chromie. Spowoduje to oddzwonienie dopiero po 200 ms od ostatniego zdarzenia zmiany rozmiaru.


0

AKTUALIZACJA!

Lepsza alternatywa również stworzona przeze mnie jest tutaj: https://stackoverflow.com/a/23692008/2829600 (obsługuje „funkcje usuwania”)

ORYGINALNY POCZTA:

Napisałem tę prostą funkcję do obsługi opóźnienia w wykonaniu, przydatną w jQuery .scroll () i .resize () Tak więc callback_f uruchomi się tylko raz dla określonego ciągu id.

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!
*/

Czy możesz wyjaśnić tutaj użycie? Sugeruje pan, jeden ma: $(window).resize(function() { delay_exec('test1', 30, function() { ... delayed stuff here ... }); });? W przeciwnym razie całkiem czysty kod. Dzięki za udostępnienie. :)
mhulse

Rządzisz! Dzięki @ Déján! +1 do końca. Fajny przykład kodu, działa bardzo dobrze z tego, co przetestowałem. Prosty w użyciu również. Jeszcze raz dziękuję za udostępnienie. :)
mhulse

0

Zdarzenia ResizeStart i ResizeEnd dla okna

http://jsfiddle.net/04fLy8t4/

Zaimplementowałem funkcję, która wyzwala dwa zdarzenia w elemencie DOM użytkownika:

  1. resizestart
  2. zmiana rozmiaru

Kod:

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

0
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...
}

0

Nie wiem, czy mój kod działa na innych, ale naprawdę robi dla mnie świetną robotę. Wpadłem na ten pomysł, analizując kod Dolan Antenucci, ponieważ jego wersja nie działa dla mnie i naprawdę mam nadzieję, że będzie komuś pomocny.

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

0

Napisałem funkcję, która przekazuje funkcję, gdy jest opakowana w dowolne zdarzenie zmiany rozmiaru. Używa interwału, aby zmiana rozmiaru nawet nie powodowała ciągłego przekroczenia limitu czasu. Dzięki temu może wykonywać niezależnie od zdarzenia zmiany rozmiaru innego niż wpis dziennika, który powinien zostać usunięty podczas produkcji.

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

            }

}

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.