Leia a função de estabilização e limitação de imagem em um artigo

O que é anti-vibração e acelerador?

"Anti-vibração"

Cenário: Ao digitar o nome, vá para o servidor para verificar se o nome está duplicado.Se o código não for restrito, insira uma solicitação uma vez; insira várias vezes para acionar o evento

A função de retorno de chamada é executada depois que o evento é acionado n segundos e, se for acionado novamente dentro de n segundos, o temporizador é re-temporizado

Suponha uma cena: o mouse se move sobre uma div para acionar o evento onmousemove, e o texto dentro dela exibirá as coordenadas atuais do mouse.

Anti-vibração: Função anti-vibração, onde o tremor é o significado da execução e o tremor geral é contínuo, várias vezes. Supondo que a função continue sendo executada várias vezes, queremos que ela se acalme e execute novamente. Ou seja, quando o evento é disparado continuamente, a função não é executada e é executada após um período de tempo após o término do último disparador.

Divida os requisitos:

O disparo contínuo não é executado
Executar após um período de não acionamento

Então, como alcançar os objetivos acima?

Se for executado dentro do tempo não acionado, será necessário um temporizador,
Chame a função que queremos executar no timer, passe argumentos, encapsule uma função, deixe o evento disparado continuamente ouvir a função que encapsulamos e passe a função de destino como retorno de chamada, o segundo ponto é alcançado ,
Veja o primeiro ponto: o disparo contínuo não é executado. Vamos pensar primeiro, o que faz nossa função executar? É setTimeout acima.
OK, então o problema agora se torna acionamento contínuo e não pode haver setTimeout, para que, quando o acionamento contínuo for continuado, o temporizador seja limpo .

"Acelerador"

A otimização será usada na entrada e no keyup para acionar eventos como redimensionar e mover com mais frequência. A limitação forçará a função a executar em uma taxa fixa. O conceito de estrangulamento pode ser imaginado como uma barragem. Você construiu uma barragem em um canal de rio. Você não pode deixar a água fluir. Você só pode deixar a água fluir mais devagar. Em outras palavras, você não pode permitir que os métodos do usuário não sejam executados. Se você fizer isso, é "anti-shake".

Regulagem significa que a função é executada de maneira controlada, em vez de ser executada uma vez sem acionamento descontrolado. O que é temperança? É acionado uma vez em um período de tempo.

Divida os requisitos:

O disparo contínuo não é executado várias vezes
Para executar em um determinado momento

Então, como alcançar os objetivos acima?

Disparado continuamente, e não será executado, mas será executado quando o tempo acabar. Pegue um ponto-chave " hora de executar " .
Para controlar o tempo de execução, podemos fazê-lo através de um switch, combinado com o timer setTimeout.
O pré-requisito para a execução da função é que o comutador seja aberto e, quando o gatilho é continuado, o comutador é continuamente fechado.
Aguarde até que o tempo setTimeout termine e, em seguida, ligue o interruptor , a função será executada.

Nota: O resultado da execução da função de aceleração aqui é a chamada de sua função de retorno interno, o que significa que o monitoramento de eventos pelo mouse é realmente essa função retornada e é continuamente acionada por ele.

A função de aceleração fornece apenas um escopo e o fechamento interno declara uma variável de chave de execução.

Como a execução variável do fechamento sempre existirá e não será destruída, e let run = true será declarado apenas uma vez neste fechamento (escopo local), mas não será executado continuamente; portanto, o julgamento interno da função de retorno Não será substituído por ele.

Resumo:

O anti-vibração e o controle inteligente usam setTimeout para controlar o tempo de execução das funções.As vantagens são óbvias, o desempenho pode ser salvo e a lógica de negócios complexa não pode ser acionada muitas vezes e causar paradas de página.

Anexe o código completo:

<! DOCTYPE html > 
< html lang = "en" > 
< cabeça > 
    < meta charset = "UTF-8" > 
    < title > Título </ title > 
</ head > 
< estilo > 
  #container { 
    width : 500px ; 
    altura : 200 px ; 
    fundo : #ccc ; 
    tamanho da fonte : 20 px ; 
    alinhamento de texto :centro ; 
    altura da linha : 200 px ; 
  } 
</ style > 
< body > 
  < div id = "container" > </ div > 
</ body > 
< script > 
// 防抖
função debounce (func, delay) { 
  let timeout; 
  função de retorno  () { 
    clearTimeout (timeout) 
    timeout = setTimeout (() => { 
      func.apply ( this , argument) 
    ), delay) 
  } 
} 
const container = document.querySelector ( ' div ' );
 // Chame o método 
container.onmousemove = debounce ( função (e) { 
  container.innerHTML = `clientX = $ {e.clientX}, clientY $ {e.clientY}` 
}, 1000 ); 

// acelerador 
função do acelerador (FUNC, Delay) { 
  RUN let =  a verdade ; 
  o console.log ( ' acionado quando um ' , RUN);
   retorno  função () { 
    o console.log ( 'função de retorno content' , execute); 
     if ( ! execute) {
       return  false  // Se o switch estiver fechado, o código a seguir não será executado 
    } 
    console.log ( ' Depois de julgar se o switch está fechado ou não ' , execute); 
    run =  false ; // Se continuar disparando, a execução será sempre falsa e será interrompida no julgamento superior. 
    Console.log ( 'Depois que a opção for fechada ' , execute); 
    setTimeout (() => { 
      func.apply ( this , argument)); 
      run =  true ; 
      console.log ( 'Depois que o switch for ativado ', corre); 
    }, Atraso) 
  } 
} 
recipiente const = document.querySelector ( ' div ' );
// 调用方法
container.onmousemove = acelerador ( função (e) { 
  container.innerHTML = `clientX = $ {e.clientX}, clientY $ {e.clientY}` 
}, 1000 );
</ script > 
</ html >

Abrir no PDFlux

Sem dados

Leia a função de estabilização e limitação de imagem em um artigo

Acho que você gosta