DOM onResize evento
-
19-09-2019 - |
Domanda
Se ho questo
window.onresize = function() {
alert('resized!!');
};
La mia funzione viene licenziato più volte di tutto il ridimensionamento, ma voglio catturare il di completamento del ridimensionamento. Questo è in IE.
Tutte le idee? Ci sono varie idee non mancano, ma non ha funzionato per me finora (presunto evento window.onresizeend esempio di IE.)
Soluzione
In questo caso, lo farei con forza suggerire debouncing. Il modo più semplice, efficace e affidabile per fare questo in JavaScript che ho trovato è plugin per jQuery di Ben Alman, acceleratore / rimbalzo . (può essere usato con o senza jQuery - Lo so ... suona strano)
Con antirimbalzo, il codice per fare questo sarebbe semplice come:
$(window).resize($.debounce(1000, function() {
// Handle your resize only once total, after a one second calm.
...
}));
La speranza che possa aiutare qualcuno. ;)
Altri suggerimenti
Lo uso sempre quando voglio fare qualcosa dopo il ridimensionamento. Le chiamate al setTimeout
e clearTimeout
non sono di alcun impatto notevole sulla velocità del ridimensionamento, quindi non è un problema che questi sono chiamati più volte.
var timeOut = null;
var func = function() { /* snip, onresize code here */};
window.onresize = function(){
if(timeOut != null) clearTimeout(timeOut);
timeOut = setTimeout(func, 100);
}
Questa è non perfetto , ma dovrebbe dare l'avvio è necessario.
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();
}
È possibile ottenere più eventi, perché ci sono davvero più eventi. Finestre anima il ridimensionamento facendo più volte mentre si trascina la finestra (per impostazione predefinita, è possibile modificare nel registro credo).
Che cosa si potrebbe fare è aggiungere un ritardo. Fare un clearTimeout, setTimout (myResize, 1000) ogni volta che l'evento di IE. Quindi, solo l'ultima farà il ridimensionamento vero e proprio.
Non so se questo potrebbe aiutare, ma dal momento che sembra funzionare perfettamente, eccolo qui. Ho preso il frammento dal post precedente e modificato leggermente. La funzione doCenter () prima traduce px a em e che sottrae la larghezza dell'oggetto e divide il resto per 2. Il risultato è assegnato come margine sinistro. doCenter () viene eseguito per centrare l'oggetto. incendi timeout quando la finestra viene ridimensionata esecuzione doCenter () di nuovo.
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);
};
soluzione semplice javascript pura, basta cambiare il valore di 1.000 int ad essere inferiore per più reattività
var resizing = false;
window.onresize = function() {
if(resizing) return;
console.log("resize");
resizing = true;
setTimeout(function() {resizing = false;}, 1000);
};
Mi è piaciuta soluzione elegante di Pim Jager, anche se penso che ci sia un parentesi extra alla fine e penso che forse il setTimeout dovrebbe essere "timeout = setTimeout (func, 100);"
Ecco la mia versione che utilizza Dojo (assumendo una funzione definita chiamato demo_resize ()) ...
var _semaphorRS = null; dojo.connect(window,"resize",function(){ if (_semaphorRS != null) clearTimeout(_semaphorRS); _semaphorRS = setTimeout(demo_resize, 500); });
. Nota: nella mia versione delle parentesi di trascinamento è necessario