Alguns cálculos e processamento no navegador são muito mais caros que outros. Por exemplo, as operações DOM requerem mais tempo e tempo da CPU do que as interações não-Dom. Tentar fazer muitas operações relacionadas ao DOM em sucessão pode fazer com que o navegador pendure e às vezes até trava. Isso é fácil de ocorrer, especialmente ao usar o manipulador de eventos OnResize no IE. Quando o navegador é redimensionado, o evento é acionado continuamente. Se você tentar executar operações DOM dentro do manipulador de eventos OnResize, suas alterações de alta frequência poderão travar o navegador.
A idéia básica por trás do estrangulamento da função é que um determinado código não pode ser executado repetidamente sem interrupção. Na primeira vez em que a função é chamada, um temporizador é criado e o código é executado após o intervalo de tempo especificado. Quando a função é chamada de segundo temporizador, ele limpa o temporizador anterior e define outro. Se o temporizador anterior foi executado, esta operação não tem significado. No entanto, se o cronômetro anterior não tiver sido executado, ele será substituído por um novo timer. O objetivo é executar somente após a solicitação para executar a função ter sido interrompida por um período de tempo.
função acelerador (método, contexto) {cleartimeout (métod.tid); Method.tid = setTimeout (function () {Method.call (context);}, 100); }Exemplo de aplicação:
Supondo que exista um elemento <div/> que precisa manter sua altura sempre igual à sua largura, ele pode ser codificado da seguinte maneira:
function redimensioniv () {var div = document.getElementById ("mydiv"); div.style.Height = Div.OffSetWidth + "PX"; } window.onResize = function () {acelerador (redimensionado); }Aqui, a função de redimensionamento é colocada em uma função separada chamada redimensionado, e o OnResize Event Handler Calls acelera () e passa na função redimensionada em vez de chamar redimensioniv () diretamente. Na maioria dos casos, os usuários não podem sentir a mudança, embora os cálculos salvos no navegador possam ser muito grandes.
Abaixo estão as adições de outros internautas
Hoje, escrevemos principalmente sobre a limitação da função de que precisamos em nosso trabalho diário. Alguns amigos podem não estar cientes da limitação da função. De fato, no trabalho, muitos cenários exigem que aceleremos: //www.sub.com. Os mais comuns são redimensionamentos de tela e eventos de touchmove ou rolagem. Não sei se já li os artigos que escrevi antes! JQuery determina a direção deslizante da barra de rolagem da página e do Touchmove. Quando você usa esses exemplos, você descobrirá que a página continua acionando o Touchmove ou a rolagem porque não há necessidade de repintar a página, então não estou usando a função JavaScript para acelerar aqui. No entanto, quando usamos o Window.OnResize, o evento de redimensionamento será acionado continuamente! Isso estará relacionado ao problema de repintura de página. Portanto, ao redimensionar a janela, recomendamos que você use a limitação da função!
Introdução ao estrangulamento das funções JavaScript
Se você se sentir sobrecarregado por um grande texto em mim, isso não importa. Vou lhe dar um breve exemplo para ilustrar a função estrangulando aqui! Por exemplo, quando usamos
$ (janela) .Resize (function () {Console.log ("Window Ressiense de Haorooms");})Você encontrará:
Será produzido muitas vezes aqui. Simplesmente estreitamos a janela e ela continuará desencadeando!
Dessa forma, quando o div é frequentemente usado, a página será redesenhada continuamente. Se você encontrar o IE com uma versão relativamente baixa, o navegador poderá travar! Para evitar isso, podemos usar o método de limitação da função. A idéia básica é: quando a função é chamada pela primeira vez, criamos um cronômetro, executamos o código após o intervalo de tempo especificado e, quando a segunda vez for chamada, entenderemos claramente o temporizador anterior e redefiniremos um. Se o temporizador anterior foi executado, essa operação não será intencional. Se o temporizador não tiver sido executado, ele será substituído por um novo timer. O objetivo é executar a função após a parada por um período de tempo.
O método do objeto pode ser escrito da seguinte maneira:
var haoroomstest = {timeoutId: null, performProcessing: function () {console.log ("redimensionamento"); }, processo: function () {clearTimeout (this.timeoutId); var que = this; this.timeoutId = setTimeout (function () {that.performProcessing ();}, 500)}}Depois disso, usamos:
$ (janela) .Resize (function () {Haoomstest.process ();})
Isso reduzirá os pedidos, reduzirá o redesenho de DOM e alcançará o objetivo de acelerar!
Outras formas de função acelerar
Além da maneira como usamos objetos, outros métodos e métodos de limitação de função também são introduzidos on -line e nas informações. Vou apresentar brevemente vários abaixo!
Função Método um
função acelerador (método, contexto) {cleartimeout (métod.tid); Method.tid = setTimeout (function () {Method.call (context);}, 100); }Nós usamos
function redimensioniv () {console.log ("harooms")} $ (janela) .Resize (function () {acelerador (redimensionado)})O mesmo efeito que o objeto acima!
Método da função Dois
Há também uma maneira mais popular de banir dinheiro online, então vou escrever sobre isso aqui!
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); }}Então você pode escrever isso:
function redizesiv () {console.log ("Haorooms")} window.onResize = acelerador (redimensionado, 500);Nova demanda
Quando fizermos prompts de associação inteligente de pesquisa difusa, vincularemos o evento KeyUp na entrada. Mas não quero acioná -lo com tanta frequência, então haverá problemas usando o método acima. Portanto, a função acima é ligeiramente alterada, da seguinte maneira:
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 forma, o disparo não será tão frequente quanto antes!