acelerar
O acelerador de que estamos falando aqui significa que a função estrangula. Para simplificar, o controlador de frequência das chamadas de função é executar continuamente o controle do intervalo de tempo. Cenários de aplicativos principais, como:
1. Evento de movimentação do mouse
2. Posicionamento dinâmico de elementos DOM, redimensionamento e rolagem de eventos de objetos de janela
Algumas pessoas comparam vividamente o incidente mencionado acima com o ataque de uma metralhadora. O acelerador é o gatilho da metralhadora. Se você não colocar o gatilho, ele continuará disparando. O mesmo vale para os eventos acima que usamos durante o desenvolvimento. Se você não liberar o mouse, seus eventos sempre serão acionados. Por exemplo:
A cópia do código é a seguinte:
var resizETimer = null;
$ (janela) .on ('redimensionar', function () {
if (resizETimer) {
ClearTimeout (ResizEtimer)
}
ResizETimer = setTimeout (function () {
console.log ("redimensionamento da janela");
}, 400);
Debounce
Debounce é muito semelhante ao acelerador. Debounce é um método que será executado quando o tempo livre deve ser maior ou igual a um determinado valor. Debounce é o controle de intervalo do tempo livre. Por exemplo, quando fazemos preenchimento automático, precisamos controlar o intervalo de tempo de chamar o método ao entrar no texto. Geralmente, o primeiro caractere de entrada começa a ligar imediatamente e o método executado é chamado repetidamente de acordo com um certo intervalo de tempo. É particularmente útil para entradas anormais, como manter uma certa e não colocá -lo.
Os principais cenários de aplicativos de Debounce são:
Evento de keydown de entrada de texto, evento KeyUp, por exemplo, preenchimento automático
Existem muitos métodos para esse tipo de on -line, como o subscore.js encapsula o acelerador e o debounce. O JQuery também tem um plug-in para aceleração e debounce: acelerador/debounce jQuery. Todos os princípios são iguais e as mesmas funções são implementadas. Aqui está outra função de controle de aceleração e deboun que eu tenho usado novamente:
A cópia do código é a seguinte:
/*
* Quando a função de retorno do controle de frequência é chamada continuamente, a frequência de execução do FN é limitada a quantas vezes é executada sempre
* @param fn {function} funções que precisam ser chamadas
* @param atraso {número} tempo de atraso em milissegundos
* @param imediato {bool} passa false para o parâmetro imediato A função ligada é executada primeiro, em vez de atrasado e depois executada.
* @return {function} realmente chama a função
*/
VAR acelerador = função (fn, atraso, imediato, debounce) {
var curr = +new Date (), // Evento atual
last_call = 0,
last_exec = 0,
Timer = nulo,
Diff, // Diferença de tempo
contexto, // contexto
args,
EXEC = function () {
last_exec = curr;
fn.Apply (contexto, args);
};
Return function () {
curr = +new Date ();
contexto = isso,
args = argumentos,
diff = curr - (debounce? last_call: last_exec) - atraso;
ClearTimeout (timer);
if (debounce) {
se (imediato) {
timer = setTimeout (exec, atraso);
} else if (diff> = 0) {
exec ();
}
} outro {
if (diff> = 0) {
exec ();
} else if (imediato) {
timer = setTimeout (exec, -diff);
}
}
last_call = curr;
}
};
/*
* Quando a função de retorno de controle ocioso é chamado continuamente, o tempo ocioso deve ser maior ou igual ao atraso antes que o FN seja executado.
* @param fn {function} a função a ser chamada
* @param atraso {número} tempo livre
* @param imediato {bool} passa false para o parâmetro imediato A função ligada é executada primeiro, em vez de atrasado e depois executada.
* @return {function} realmente chama a função
*/
var debounce = function (fn, atraso, imediato) {
Retornar o acelerador (FN, atraso, imediato, verdadeiro);