Sono nuovo di js. Per favore, non calciare dolorosamente. Ho questo codicewindow.onresize firees twice
window.onresize=function() {alert(1);};
Quando ho ridimensionare qualsiasi finestra browser`s, questa funzione incendi due volte. Perché? E come riscrivere questo codice che il codice sparerà una volta.
Grazie in anticipo.
È necessario un timeout per raggruppare gli eventi di ridimensionamento.
var res;
window.onresize=function() {
if (res){clearTimeout(res)};
res = setTimeout(function(){console.log("resize triggered");},100);
};
'100' è troppo lungo. Un utente può attivare due eventi di ridimensionamento legittimi. Potresti anche obiettare che ogni timeout è troppo lungo. In teoria è possibile ridimensionare in modo programmatico la finestra per generare eventi con intervalli arbitrari. – Halcyon
@Halcyon Penso che abbiate frainteso la domanda. L'obiettivo è sopprimere tutti gli eventi di ridimensionamento successivi (che tuttavia appartengono ancora allo stesso ridimensionamento). Dipende pesantemente dallo scenario, ma dato un normale evento di un utente che ridimensiona il suo browser in un modo normale, si potrebbe obiettare, se 100 ms è forse troppo basso, ma certamente non troppo. – Christoph
Il mio punto è che il debouncing usando un timeout è almeno un po 'impreciso. A mio parere, il modo migliore per rimbalzare è controllare la dimensione della finestra. Se la dimensione non cambia, puoi tranquillamente scartare l'evento di ridimensionamento. Il timeout è buono, ma c'è un modo migliore. – Halcyon
Questo evento verrà attivato più volte in diversi browser (alcuni dopo aver completato il ridimensionamento, altri durante).
Un modo per aggirare questo è attendere un certo periodo di tempo (diciamo mezzo secondo) dopo l'attivazione dell'evento, per vedere se ci sono ulteriori aggiornamenti. In caso contrario, è possibile procedere con l'avviso.
ad es.
Vedere funzionano su this fiddle.
Per evitare che la funzione da "sparare" lo stesso risultato più di una volta quando l'utente ridimensiona
var doc = document; //To access the dom only once
var cWidth = doc.body.clientWidth;
var newWidth = cWidth; //If you want a log to show at startup, change to: newWidth = 0
window.onresize = function(){
newWidth = doc.body.clientWidth;
if(cWidth != newWidth){
cWidth = newWidth;
console.log("clientWidth:", cWidth); //instead of alert(cWidth);
};
};
Questo è il modo corretto per rilevare l'evento di ridimensionamento duplicato. O il primo o il secondo evento non modificheranno effettivamente il viewport. Perpah 'window.clientWidth/Height' è migliore di' document.body.clientWidth'. – Halcyon
@Halcyon Stai fraintendendo il concetto di ridimensionare gli eventi e/o la natura asincrona di Javascript. Questo approccio non risolverà il problema. – Christoph
propongo altra soluzione, perché non mi piacciono i timeout,
`var resized;
window.onresize = function() {
if(resized){
resized = false;
}
else{
resized = true;
alert('resize');
}
};`
Questo presuppone che ci siano esattamente due eventi. Se è presente un solo evento o più di due eventi, questo codice bloccherà in modo errato gli eventi. – Halcyon
Penso che avremo bisogno di qualche informazione in più e forse un jsfiddle. – CaptainCarl
vedi questa risposta => http://stackoverflow.com/questions/5534363/why-does-the-jquery-resize-event-fire-twice – PlantTheIdea
Non si attiva due volte, si attiva ogni volta che il browser pensa un nuovo ridimensionamento E 'attivato. È necessario utilizzare un timeout per rendere questo lavoro accettabile. – Christoph