Este artigo descreve o conceito e o uso da redução da função de JavaScript. Compartilhe -o para sua referência, como segue:
Recentemente, quando eu estava fazendo páginas da web, eu tinha um requisito, que era alterar alguns tamanhos de elementos de página quando a janela do navegador mudou, então naturalmente pensei no evento redimensionado da janela, então escrevi isso
<! Doctype html> <html> <head> <title> acelerador </title> </ad Head> <body> <script type = "text/javascript"> n = 0; function redizeHandler () {console.log (new Date (). getTime ()); console.log (++ n); } window.onResize = RECEDIMEDLER; </script> </body> </html>A função é implementada, mas quando eu arrasto e solto a maneira como troco o tamanho da janela do navegador, olhei para o console
É isso mesmo, um simples arrasto e gota fez do meu método RECESENTEDLER () executar 52 vezes, o que não é o efeito que eu quero. De fato, o código do meu método RECENDIMEDHANDLER () é muito complicado, e eu até uso o AJAX para enviar solicitações ao servidor. Se eu simplesmente alterar o tamanho da janela por vez, tenho que ligar para 52 vezes. Isso é um grande negócio.
Função de estacamento
De fato, minha intenção original é fazer alguns ajustes na página após a redação da janela. O evento redimensionado da janela não é acionado após as extremidades redimensionadas. Não conheço a frequência específica, mas está constantemente ligando até que o tamanho da janela não mude. De fato, mecanismos e mousemove semelhantes são desencadeados repetidamente em um curto período de tempo.
Existem funções que lidam especificamente com esse problema na programação avançada de JavaScript
função acelerador (método, contexto) {cleartimeout (métod.tid); Method.tid = setTimeout (function () {Method.call (context);}, 500);}O princípio é muito simples. Use um cronômetro para atrasar a execução da função em 500 milissegundos. Se uma função for chamada novamente em 500 milissegundos, a última chamada será excluída. Desta vez, a chamada será executada após 500 milissegundos, e isso será repetido. Dessa forma, meu código agora pode ser alterado para
<script type = "text/javaScript"> n = 0; function resageMandler () {console.log (new Date (). getTime ()); console.log (++ n);} Função do acelerador (método, contexto) {clearTimeout (métod.tid); method.tid = setTimeout (function () {method.call (context);}, 500);} window.onResize = function () {acelerador (redimensionamento, Window);}; </script>Tente arrastar e arrastar, ele só foi executado uma vez
Outra maneira de fazer isso
Há também uma solução de limitação de função online, que faz isso
Função do acelerador (método, atraso) {var timer = null; retornar function () {var context = this, args = argumentos; ClearTimeout (timer); Timer = setTimeout (function () {Method.Apply (context, args);}, atraso); }}Tente chamá -lo, o mesmo efeito
<script type = "text/javaScript"> n = 0; function resageMandler () {console.log (new Date (). getTime ()); console.log (++ n);} Função do acelerador (método, atraso) {var timer = null; retornar function () {var context = this, args = argumentos; ClearTimeout (timer); Timer = setTimeout (function () {Method.Apply (context, args);}, atraso); }} window.onResize = acelerador (redimensionado, 500); // Como o identificador de função é retornado, não há necessidade de envolver a função </sCript>Comparar
Ambos os métodos usam o setTimeout. A diferença é que a função adicionada pelo segundo método atrasa o tempo de execução. É fácil ter essa função na primeira solução, adicionando um parâmetro.
Mas a primeira opção define o TID como uma variável da função para salvar, enquanto a segunda opção cria um fechamento para armazenar. Pessoalmente, acho que a lacuna não é grande, e gosto da primeira, o que é simples e eficiente.
Nova demanda
Um dia, fiz algo semelhante, assim como o prompt automático para a entrada da página inicial do Baidu. Liguei o evento KeyUp no texto. Ele solicita automaticamente toda vez que o teclado aparece, mas não quero solicitar com tanta frequência. Então eu usei o método acima, mas foi trágico. Eu apenas parei de entrada e esperei 500 milissegundos para o promotamento, e não havia nenhum aviso durante o processo de entrada. Eu olhei para o código e descobri que não era verdade. Enquanto o usuário digitar cegamente, pressione o teclado dentro de 500 milissegundos, a função rápida seria continuamente atrasada. Isso só solicitaria quando eu parasse, o que seria sem sentido.
Pode ser executado uma vez em um tempo fixo com base no estrangulamento da função?
Pequenas mudanças
Eu pesquisei on -line e podemos fazer algumas alterações com base no segundo método de escrita (o primeiro é um pouco ruim para expandir várias variáveis para funções) e adicionar um parâmetro, pois o intervalo fixo deve ser executado.
Função do acelerador (método, atraso, duração) {var timer = null, begin = new Date (); retornar function () {var context = this, args = argumentos, current = new Date () ;; ClearTimeout (timer); if (-Begin Current> = Duração) {Method.Apply (contexto, args); BEGIN = atual; } else {timer = setTimeout (function () {Method.apply (context, args);}, atraso); }}}Dessa maneira, determinaremos quanto tempo o intervalo dura. Se o tempo de configuração for excedido, o executaremos imediatamente. Use o exemplo agora para experimentar o efeito
window.onResize = acelerador (RECEDIMEDLER, 100.200);
É verdade que não há execução frequente ou execução final
For more information about JavaScript related content, please check out the topics of this site: "Summary of JavaScript switching effects and techniques", "Summary of JavaScript search algorithm skills", "Summary of JavaScript animation effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm skills", "Summary of Javascript Algoritmos e Técnicas de Traversal "e" Resumo do Uso do Javascript Mathematic Operations "
Espero que este artigo seja útil para a programação JavaScript de todos.