DOM onresize imprezy

Question

Jeśli mam to

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

Moja funkcja pobiera opalane wiele razy całym zmiany rozmiaru, ale chcę uchwycić zakończenie tego rozmiaru. To jest w IE.

Wszelkie pomysły? Istnieje wiele różnych pomysłów, ale jak dotąd nie działało to dla mnie (przykład IE rzekomego zdarzenia window.onresizeend).

Answer 1

W tym przypadku, chciałbym silnie sugerują debouncing. Najprostszym, najbardziej skutecznym i niezawodnym sposobem na to w JavaScript, który znalazłem jest Ben Alman's jQuery plugin, Throttle/Debounce (może być używany z lub bez jQuery - wiem ... brzmi dziwnie).

Z debouncing kod to zrobić byłoby tak proste, jak:

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

nadzieja, że ​​może komuś pomóc. ;)

Answer 2

Otrzymujesz wiele zdarzeń, ponieważ naprawdę istnieje wiele zdarzeń. Windows animuje zmianę rozmiaru, wykonując ją kilka razy podczas przeciągania okna (domyślnie można to zmienić w rejestrze, jak myślę).

Możesz dodać opóźnienie. Wykonaj clearTimeout, setTimout (myResize, 1000) przy każdym uruchomieniu zdarzenia IE. Następnie tylko ostatnia zrobi rzeczywistą zmianę rozmiaru.

Answer 3

To jest nie jest idealne, ale powinno dać ci start, którego potrzebujesz.

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

Zawsze używam tego, gdy chcę coś zmienić po zmianie rozmiaru. Połączenia do setTimeout i clearTimeout nie mają żadnego zauważalnego wpływu na szybkość zmiany rozmiaru, więc nie jest to problemem, że są one nazywane wiele razy.

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

Answer 5

lubiłem eleganckie rozwiązanie Pim Jager, chociaż myślę, że znajduje się dodatkowy paren na koniec i myślę, że może setTimeout powinno być "timeout = setTimeout (func, 100);"

Oto moja wersja użyciu Dojo (zakładając funkcji określonej nazwie demo_resize()) ...

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

Uwaga: w mojej wersji jest wymagane paren wleczone.

Answer 6

Nie jestem pewien, czy to może pomóc, ale ponieważ wygląda na to, że działa idealnie, oto jest. Wziąłem fragment z poprzedniego postu i nieco go zmodyfikowałem. Funkcja doCenter() najpierw tłumaczy px na em, a następnie odejmuje szerokość obiektu i dzieli pozostałość przez 2. Wynik jest przypisywany jako lewy margines. DoCenter() jest wykonywany w celu wyśrodkowania obiektu. timeout odpala przy zmianie rozmiaru okna, wykonując ponownie procedurę doCenter().

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 7

proste rozwiązanie czystego javascript, wystarczy zmienić wartość 1000 int być niższa o więcej wrażliwości

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