A função mais básica do JavaScript nas páginas da web é ouvir ou responder às ações do usuário, o que é muito útil. Ações de alguns usuários são muito frequentes, enquanto outros são muito raros. Algumas funções do ouvinte são executadas como um raio, enquanto outras são pesadas para arrastar o navegador até a morte. Veja o evento redimensionado da janela do navegador, por exemplo. Este evento será acionado uma vez em todas as mudanças de escala no tamanho da janela do navegador. Se o ouvinte for grande, seu navegador será arrastado em breve.
Obviamente, não podemos permitir que o navegador seja arrastado para baixo, mas não podemos excluir o ouvinte. No entanto, podemos limitar a frequência das chamadas de função e enfraquecer o impacto da operação da função de evento. Comparado a deixar a mudança de tamanho da janela acionar a função do ouvinte uma vez, agora podemos ouvir o intervalo mínimo de acionamento da função que deve ser maior do que quantos milissegundos, para manter um canal de chamada razoável e garantir que a experiência do usuário não destrua. Existe uma boa biblioteca de ferramentas JS chamada subscore.js, que possui um método simples que permite criar facilmente ouvintes que reduzem a frequência das funções de evento que desencadeia.
Código JavaScript
O código para o ouvinte do Downswitch é simples:
A cópia do código é a seguinte:
// Crie um ouvinte
var updatelayout = _.debounce (função (e) {
// faz toda a atualização do layout aqui
}, 500); // executa uma vez a cada 500 milissegundos pelo menos
// Adicione o ouvinte do evento
window.addeventListener ("redimensionar", updatelayout, false);
... A camada subjacente deste código subldscore.js está realmente usando o intervalo para verificar a frequência das chamadas de função de evento:
// retorna uma função, que, desde que continue a ser invocada, não
// ser acionado. A função será chamada depois que parar de ser chamada para
// n milissegundos. Se `imediato 'for passado, acionar a função no
// borda principal, em vez da direita.
_.debounce = function (func, espere, imediato) {
timeout var;
Return function () {
var context = this, args = argumentos;
var mais tarde = function () {
timeout = nulo;
if (! imediato) func.apply (contexto, args);
};
var callnow = imediato &&! Timeout;
ClearTimeout (tempo limite);
timeout = setTimeout (mais tarde, espere);
if (callnow) func.apply (context, args);
};
};
O código não é particularmente complicado, mas também é um tipo de felicidade não ter que escrever você mesmo. Esta função de debounce não depende de outras funções do subscore.js, para que você possa adicionar esse método à sua biblioteca de ferramentas JS favorita, como jQuery ou MooTools, o que é fácil:
A cópia do código é a seguinte:
// Mootools
Function.implement ({
Debounce: function (espera, imediato) {
Timeout var,
func = this;
Return function () {
var context = this, args = argumentos;
var mais tarde = function () {
timeout = nulo;
if (! imediato) func.apply (contexto, args);
};
var callnow = imediato &&! Timeout;
ClearTimeout (tempo limite);
timeout = setTimeout (mais tarde, espere);
if (callnow) func.apply (context, args);
};
}
});
// Use!
window.addevent ("redimensionar", myfn.debounce (500));
Como mencionado acima, o evento redimensionado da janela é o local mais comum para usar a operação para baixo de frequência. Outro local comum é que um prompt de conclusão automática é fornecido com base na entrada da entrada do usuário. Eu realmente gosto de coletar esses trechos de código, que podem facilmente tornar seu site mais eficiente. Ao mesmo tempo, também recomendo que você estuda subscore.js, que fornece um grande número de funções muito úteis.