javascript ridimensionare evento sparando più volte durante il trascinamento gestire il ridimensionamento

Question

Speravo che questo jQuery plug-in avrebbe funzionato, ma non ha:

http://andowebsit.es/blog/noteslog.com/post/how-to-fix-the-resize-event-in-ie (vecchio link era noteslog.com/post/how-to -fix-the-resize-event-in-ie).

Ho aggiunto un commento al suo sito, ma sono moderati, quindi potresti non vederlo ancora.

Ma comunque, lasciatemi spiegare il mio desiderio. Voglio che un evento di tipo "ridimensiona" venga attivato quando l'utente mette in pausa il suo ridimensionamento e/o completa il suo ridimensionamento, non mentre l'utente sta attivamente trascinando l'handle di ridimensionamento della finestra del browser. Ho una funzione OnResizeHandled abbastanza complessa e dispendiosa in termini di tempo che ho bisogno di eseguire, ma non di eseguire 100 volte solo perché l'utente ha allargato la finestra di 100px e l'evento è stato attivato per sempre pixel di movimento. Immagino che la soluzione migliore sarebbe gestirla una volta che l'utente ha completato il ridimensionamento.

Answer 1

Prendere in prestito alcune idee dalle soluzioni di concorrenza per gestire l'inondazione di eventi provenienti dal browser.

Ad esempio, quando si ottiene un evento di ridimensionamento, impostare un flag su true che indica che l'utente sta attualmente ridimensionando. Impostare un timeout per chiamare il gestore di eventi di ridimensionamento effettivo dopo 1 secondo. Quindi, ogni volta che questo flag è true, ignora l'evento di ridimensionamento. Quindi, nel gestore reale, una volta che tutto è stato fatto e corretto, riportare la bandiera su false.

In questo modo si elabora l'ultimo evento solo una volta al secondo (o un altro periodo di tempo in base alle proprie esigenze). Se l'utente si interrompe durante il ridimensionamento, verrà elaborato. Se l'utente ha terminato, elaborerà.

Questo potrebbe non essere adatto a te, ma ci sono molti altri modi di usare i lucchetti che potrebbero essere più utili.

Answer 2

Come impostare un timeout per quando l'utente mette in pausa il ridimensionamento? Ripristina il timeout durante il ridimensionamento o attiva il gestore di eventi resize nel caso in cui scada il timeout.

Answer 3

Dato che è costruito in jQuery, non è possibile associare qualche tipo di evento onComplete all'estensione e passare una funzione che deve essere eseguita quando viene chiamata?

Edit:

Quando l'utente avvia ridimensionamento della finestra, impostare un intervallo che osserva le dimensioni della finestra. Se le dimensioni non sono state modificate in un periodo di tempo prestabilito della specifica, è possibile considerare il ridimensionamento della finestra "completato". La tua funzione javascript di scelta sarebbe setInterval(), che accetta due argomenti: una funzione per chiamare ogni tick e la durata di ogni tick in millisecondi.

Per quanto riguarda come scrivere specificamente all'interno del framework jquery, beh, non ne so abbastanza di jquery per poterlo dire. Forse qualcun altro può aiutarti in modo più specifico, ma allo stesso tempo potresti prendere in considerazione l'estensione dell'estensione jquery che hai già collegato con un evento onComplete che funziona come ho appena descritto.

Answer 4

Che ne dite di un po 'di codice come questo:

function resizeStuff() { 
//Time consuming resize stuff here 
} 
var TO = false; 
$(window).resize(function(){ 
if(TO !== false) 
    clearTimeout(TO); 
TO = setTimeout(resizeStuff, 200); //200 is time in miliseconds 
}); 

Questo dovrebbe assicurarsi che la funzione ridimensiona solo quando l'utente smette di ridimensionamento.

Answer 5

Paul Irish ha un ottimo Debounced jQuery plugin che risolve questo problema.

Answer 6

Ho esteso alcuni giorni fa il jQuery predefinito on -event-handler. Allega una funzione di gestore di eventi per uno o più eventi agli elementi selezionati se l'evento non è stato attivato per un dato intervallo. Questo è utile se vuoi attivare una richiamata solo dopo un ritardo, come l'evento di ridimensionamento, o altro. 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)); 

Usalo come qualsiasi altro on o bind gestore -Event, tranne che è possibile passare un parametro aggiuntivo come ultimo:

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

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

Answer 7

Se siete in librerie , dovresti controllare il carattere di sottolineatura, il trattino di sottolineatura gestisce già le tue necessità e molti altri ancora ne avrai nei tuoi progetti.

Ecco un esempio di come la sottolineatura debouncer funziona:

// declare Listener function 
var debouncerListener = _.debounce(function(e) { 

    // all the actions you need to happen when this event fires 

}, 300); // the amount of milliseconds that you want to wait before this function is called again 

poi basta chiamare tale funzione debouncer sul ridimensionamento della finestra

window.addEventListener("resize", debouncerListener, false); 

checkout tutte le funzioni di sottolineatura disponibili qui http://underscorejs.org/