FuntLing, simplesmente, sim, torna uma função incapaz de ser chamada continuamente dentro de um intervalo de tempo muito curto. Somente quando a última função for executada após o intervalo de tempo especificado por você pode ser feita a próxima chamada para a função.
O princípio da limitação da função é bastante simples. Acho que todo mundo pensou nisso, esse é o cronômetro. Quando aciono um horário, primeiro o ajuste para adiar o evento por um tempo antes da execução. Se o evento for acionado novamente nesse intervalo de tempo, limpamos o temporizador original e, em seguida, definimos um novo timer para adiar a execução por um tempo, é isso.
Nos cenários seguintes, os cenários a seguir geralmente realizam comportamentos pesados, como operações DOM e carregamento de recursos, fazendo com que a interface do usuário pause ou até os falhas do navegador.
1. Redimensione e role os eventos do objeto de janela
2.
3. Eventos de Mousedown e Keydown em jogos de tiro
4. Eventos de KeyUp que são concluídos automaticamente pela entrada de texto
De fato, para o evento redimensionado da janela, o requisito real é parar de alterar o tamanho n milissegundos e executar processamento subsequente; enquanto a maioria dos outros eventos exige processamento subsequente em uma certa frequência. Existem duas soluções para essas duas necessidades, debounce e acelerador.
O acelerador e o debounce são duas soluções para resolver o problema de solicitação e velocidade da velocidade de resposta. A diferença entre os dois está na escolha de estratégias diferentes.
Execute funções em intervalos como o acelerador.
Se o evento for acionado novamente dentro do intervalo de debounce t, o timer será re-interrompido até que o tempo de parada seja maior ou igual a t.
1. Implementação simples da função do acelerador
Função acelerador (FN, Threshold, Scope) {Threshold || (Threshold = 250); Var Last, Timer; Return function () {var context = scope || esse; var agora = +new Date (), args = argumentos; if (last && agora - last + threshold <0) {// segure em ele clareoutoutout (defertimer); timer = setTimeout (function () {last = agora; fn.Apply (contexto, args);}, Threshold); } else {last = agora; fn.Apply (contexto, args); }};}Métodos de chamada
$ ('corpo').2. Implementação simples da função de debounce
function debounce (fn, atraso) {var timer = null; retornar function () {var context = this, args = argumentos; ClearTimeout (timer); timer = setTimeout (function () {fn.apply (contexto, args);}, atraso); };}Métodos de chamada
$ ('input.username'). KeyPress (debounce (function (event) {// faça a solicitação AJAX}, 250));3. Implementação simples de embalagem
/** * Throttle * @param fn, espere, debounce */var acelerador = função (fn, espera, debounce) {var timer = null, // timer t_last = null, // Último conjunto de tempo, // contexto args, // parâmetro diff; // var context = this, args = argumentos; ClearTimeout (timer); if (debounce) {// se for timer de debounce = setTimeout (function () {fn.apply (contexto, args);}, espera); } else {// se for acelerado se (! t_last) t_last = curr; if (curr - t_last> = wait) {fn.apply (contexto, espera); context = wait = null; }}}}/** * debounce * @param fn, espera */var debounce = function (fn, espera) {return acelerador (fn, espere, true);}Resumo: Esses dois métodos são adequados para alguns eventos que serão acionados repetidamente, como: mousemove, keydown, keyup, keypress, rolagem, etc.
Se você vincular apenas eventos nativos e não os controlar, o navegador será gaguejado e a experiência do usuário será ruim. Para melhorar o desempenho do JS, é recomendável usar a limitação da função ou o debounce da função para controlar ao usar os eventos acima e similares.
4. Análise do código -fonte relacionado ao sublinhado v1.7.0
1. _. Função do trocador
_.throttle = function (func, espera, opções) {var context, args, resultado; var timeout = nulo; // temporizador var anterior = 0; // tempo de tempo desencadeado pela última vez if (! Opções) opções = {}; var mais tarde = function () {anterior = options.Leading === false? 0: _.now (); timeout = nulo; resultado = func.apply (contexto, args); if (! Timeout) context = args = null; }; return function () {var agora = _.now (); // se deve executar se (! Anterior && options.leading === false) anterior = agora; // Aqui está um conceito de restante: quanto tempo é o tempo restante para executar o evento var restante = espera - (agora - anterior); context = this; args = argumentos; // remaining <= 0 Considering that the event is retried after the event is stopped or // When the wait is exactly different, the event will be triggered immediately// remains > wait does not take into account the corresponding scenario// Because now-previous is always positive and not 0, then // remaining will always be smaller than wait, and there is no greater than wait// It is estimated that it is safe, and this situation will also be executed immediately if (remaining <= 0 ||. timeout = nulo; } anterior = agora; resultado = func.apply (contexto, args); if (! Timeout) context = args = null; // se deve rastrear} else if (! Timeout && options.trailing! == false) {timeout = setTimeout (posteriormente, restante); } resultado de retorno; };};Como pode ser visto a partir do exposto, o sublinhado considerou mais situações: options.leading:
A primeira vez é executada, o padrão é verdadeiro, o que significa que a primeira vez será executada. A primeira vez que as opções de execução. O rastreamento está desativado: a última vez é executada, o padrão é verdadeiro, o que significa que a última vez será executada. A última vez é aprovada {trocando: false} significa que a última vez não é executada. A chamada primeira vez é se o evento foi executado primeiro. Quando o evento é iniciado, se o evento deve ser acionado primeiro. Se você quiser, anterior = 0, e o restante é negativo, o chamado da última vez se a função é executada, é imediatamente chamada após o término do evento. Este método é acionado na última vez. Se você deseja executar, um cronômetro está definido, ou seja, ele deve ser executado uma vez após o término do evento. Remianing> Wait significa que o tempo do cliente foi modificado.
2. _.Debounce Função
_.debounce = function (func, espera, imediato) {// Padrão imediato é falso var timeout, args, contexto, registro de data e hora, resultado; var mais tarde = function () {// Quando a função retornada por _.debounce é chamada várias vezes durante o intervalo de tempo especificado por espera, o valor do timestamp será atualizado continuamente, resultando no último <wait && last> = 0 sempre é verdadeiro; if (last <wait && last> = 0) {timeout = setTimeout (posterior, espere - último); } else {timeout = null; if (! imediato) {resultado = func.apply (contexto, args); if (! Timeout) context = args = null; }}}; retornar function () {context = this; args = argumentos; Timestamp = _.now (); // Quando o método é chamado pela primeira vez e imediatamente após o intervalo de tempo especificado por espera, o temporizador é iniciado para chamar a função FUNC se (! Timeout) timeout = setTimeout (posteriormente, aguarde); if (callnow) {resultado = func.apply (contexto, args); context = args = null; } resultado de retorno; };};Eu acho que o maravilhoso sobre a implementação do _.debounce é iniciar o timer recursivamente, em vez de ajustar a execução de atraso de chamar funções do FUNC, chamando o ClearTimeout.
O exposto acima está a função de otimização de desempenho do JavaScript, estrangulamento e debounce que o editor apresentou a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!