DOM onresize Ereignis

Question

Wenn ich diese

window.onresize = function() {
  alert('resized!!');
};

Meine Funktion wird ausgelöst, mehrmals ganze die Größe ändern, aber ich mag den Abschluss der Größe ändern erfassen. Dies ist im Internet Explorer.

Irgendwelche Ideen? Es gibt verschiedene Ideen gibt, aber nicht für mich bisher (zB IE vermeintliches window.onresizeend Ereignis.) Gearbeitet

Answer 1

In diesem Fall würde ich stark vorschlagen Entprellung. Die einfache, effektive und zuverlässige Möglichkeit, dies in JavaScript zu tun, die ich gefunden habe, ist Ben Alman jQuery-Plugin, Gas / Debounce . (mit oder ohne jQuery verwendet werden - ich weiß ... klingt seltsam)

Mit Entprellung, der Code, dies zu tun wäre so einfach wie:

$(window).resize($.debounce(1000, function() {
   // Handle your resize only once total, after a one second calm.
   ...
}));

Hoffnung, dass jemand helfen kann. ;)

Answer 2

ich dies immer verwenden, wenn ich etwas nach Größe ändern will. Die Anrufe setTimeout und clearTimeout nicht jeder wahrnehmbare Auswirkung auf die Geschwindigkeit der Redimensionierung, also ist es kein Problem, dass diese mehrfach aufgerufen werden.

var timeOut = null;
var func = function() { /* snip, onresize code here */};
window.onresize = function(){
   if(timeOut != null) clearTimeout(timeOut);
   timeOut = setTimeout(func, 100);
}

Answer 3

Dies ist nicht perfekt , aber es sollte Ihnen den Start, die Sie benötigen.

var initialX = null;
var initialY = null;
var lastResize = null;
var waiting = false;
var first = true;
var id = 0;

function updateResizeTime()
{
    if (initialX === event.clientX && initialY === event.clientY)
    {
        return;
    }

    initialX = event.clientX;
    initialY = event.clientY;

    if (first)
    {
        first = false;
        return;
    }

    lastResize = new Date();            
    if (!waiting && id == 0)
    {
        waiting = true;
        id = setInterval(checkForResizeEnd, 1000);
    }
}

function checkForResizeEnd()
{
    if ((new Date()).getTime() - lastResize.getTime() >= 1000)
    {
        waiting = false;
        clearInterval(id);
        id = 0;
        alert('hey!');
    }
}

window.onresize = function()
{
    updateResizeTime();
}

Answer 4

Sie erhalten mehrere Ereignisse, weil es wirklich mehrere Ereignisse sind. Windows-belebt die Größe ändern, indem sie es mehrmals zu tun, wie Sie das Fenster ziehen (standardmäßig, können Sie es in der Registrierung ändern, glaube ich).

Was Sie tun können, ist eine Verzögerung hinzuzufügen. Führen Sie eine clear, setTimout (myResize, 1000) jedes Mal, wenn die IE-Ereignis ausgelöst wird. Dann wird nur die letzte wird die tatsächliche Größe ändern tun.

Answer 5

Nicht sicher, ob dies helfen könnte, aber da es perfekt zu funktionieren scheint, hier ist es. Ich habe den Ausschnitt aus der früheren Post genommen und es leicht modifiziert. Die Funktion doCenter () übersetzt ersten Pixel als em und subtrahiert die Breite des Objektes und teilt den Rest von 2. Das Ergebnis wird als linker Rand zugeordnet ist. doCenter () ausgeführt, um das Objekt zu zentrieren. Timeout ausgelöst wird, wenn das Fenster verkleinert wird die Ausführung doCenter () erneut.

function doCenter() {
document.getElementById("menuWrapper").style.position = "fixed";
var getEM = (window.innerWidth * 0.063);
document.getElementById("menuWrapper").style.left = (getEM - 40) / 2 + "em";
}

doCenter();

var timeOut = null;
var func = function() {doCenter()};
window.onresize = function(){
    if (timeOut != null) clearTimeout(timeOut);
    timeOut = setTimeout(func, 100);
};

Answer 6

einfache reine Javascript-Lösung, sondern nur den 1000 int Wert ändert für mehr Ansprechbarkeit geringer sein

        var resizing = false;
        window.onresize = function() {
            if(resizing) return;
            console.log("resize");
            resizing = true;
            setTimeout(function() {resizing = false;}, 1000);
        };

Answer 7

Ich mochte Pim Jager elegante Lösung, obwohl ich glaube, dass es eine zusätzliche paren am Ende und ich denke, dass vielleicht sollte die setTimeout sein „timeout = setTimeout (func, 100);“

Hier ist meine Version mit Dojo (einer Funktion definiert genannt demo_resize unter der Annahme ()) ...

var _semaphorRS = null;
dojo.connect(window,"resize",function(){
 if (_semaphorRS != null) clearTimeout(_semaphorRS);
 _semaphorRS = setTimeout(demo_resize, 500);
 });

. Hinweis: in meiner Version der hinteren paren erforderlich sind