O primeiro timer setTimeout e SetInterval na série Bom

setTimeout ()

O método setTimeout () é usado para especificar que uma função ou string é executada após o número especificado de milissegundos. Ele retorna um número inteiro representando o número do timer, que pode ser passado para cleartimeout () para cancelar a execução desta função

No código a seguir, o console sai 0 primeiro, após cerca de 1000ms, ou seja, 1s, o valor de retorno do método timer setTimeout () é emitido.

 var timer = setTimeout (function () {console.log (timer);}, 1000); console.log (0);

Também pode ser escrito como parâmetros de string. Como esse formulário fará com que o mecanismo JavaScript analise duas vezes, reduzindo o desempenho, não é recomendável usá -lo.

 var timer = setTimeout ('console.log (timer);', 1000); console.log (0);

Se o segundo parâmetro do setTimeout for omitido, o parâmetro padrão para 0

No código a seguir, 0 e 1 aparecem no console, mas 0 está na frente, e essa pergunta será explicada posteriormente.

 var timer = setTimeout (function () {console.log (timer);}); console.log (0);

De fato, além dos dois primeiros parâmetros, o método setTimeout () também permite adicionar mais parâmetros, que serão transmitidos para a função no timer.

No código a seguir, o console será lançado 2 após cerca de 1000ms, ou seja, 1s. No entanto, o navegador IE9 apenas permite que o setTimeout tenha dois parâmetros e não suporta mais parâmetros. A NAN será emitida no console.

 setTimeout (function (a, b) {console.log (a+b);}, 1000,1,1);

Você pode usar a transferência de parâmetros IIFE para ser compatível com a transferência de parâmetros da função do navegador IE9

 setTimeout ((function (a, b) {return function () {console.log (a+b);}}) (1,1), 1000);

Ou escreva a função fora do temporizador e, em seguida, a função é chamada com parâmetros na função anônima no timer.

 teste de função (a, b) {console.log (a+b);} setTimeout (function () {test (1,1);}, 1000);

Isso aponta para

As quatro regras vinculativas apontadas por esse mecanismo foram introduzidas em detalhes nesta série. Como isso no timer está implicitamente perdido e é muito propenso a erros, ele será explicado novamente aqui.

 var a = 0; function foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeout (obj.foo, 100); // 0 // equivalente a var a = 0; settimeout (function foo () {console.log (this.a);

Se você deseja obter o valor da propriedade A no objeto OBJ, poderá colocar a função Obj.foo em uma função anônima no timer para ligação implícita.

 var a = 0; function foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeout (function () {obj.foo ();}, 100); // 2

Ou você pode usar o método de ligação para ligar esse do método foo () para obj

 var a = 0; function foo () {console.log (this.a);}; var obj = {a: 2, foo: foo} setTimeout (obj.foo.bind (obj), 100); // 2

ClearTimeout ()

A função Settimeout retorna um valor inteiro que representa o número do contador, passe o número inteiro para a função ClearTimeout, cancelando o cronômetro correspondente

 // Após 100ms, o console gera o valor de retorno do método setTimeout () 1Var Timer = setTimeout (function () {console.log (timer);}, 100);

Portanto, esse valor pode ser usado para cancelar o cronômetro correspondente

 var timer = setTimeout (function () {console.log (timer);}, 100); ClearTimeout (timer);

Ou use o valor de retorno diretamente como um parâmetro

 var timer = setTimeout (function () {console.log (timer);}, 100); ClearTimeout (1);

De um modo geral, o valor inteiro retornado pelo setTimeout é contínuo, ou seja, o valor inteiro retornado pelo segundo método Settimeout é 1 maior que o primeiro valor inteiro.

 // saída do console 1, 2, 3var timer1 = setTimeout (function () {console.log (timer1);}, 100); var timer2 = setTimeout (function () {console.log (timer2);}, 100); var timer3 = settimeout (function () {Console.Ong (timer3;

setInterval ()

O uso do setInterval é exatamente o mesmo que o setTimeout. A única diferença é que o SetInterval especifica que uma tarefa é executada de vez

 <button id = "btn"> 0 </button> <cript> var timer = setInterval (function () {btn.innerhtml = number (btn.innerhtml) + 1;}, 1000); btn.onClick = function () {clearinterval (timer); btn.inhtmmmmmml = funclick () {clearinterval (timer);

[Nota] O padrão HTML5 estipula que o intervalo de tempo mais curto do setTimeout é de 4 milissegundos; O intervalo mais curto do setInterval é 10 milissegundos, ou seja, o intervalo de tempo inferior a 10 milissegundos será ajustado para 10 milissegundos

A frequência de atualização da maioria dos monitores de computadores é de 60Hz, o que é aproximadamente equivalente a repintar 60 vezes por segundo. Portanto, o intervalo de loop ideal para o efeito de animação mais suave é de 1000ms/60, que é aproximadamente igual a 16,6ms

Para economizar energia, o navegador expande o intervalo de tempo para 1000 milissegundos para páginas que não estão na janela atual. Além disso, se o laptop estiver alimentado por bateria, o Chrome e o IE 9 ou mais alterarão o intervalo de tempo para o temporizador do sistema, que é de cerca de 16,6 milissegundos

Mecanismo de operação

Vamos explicar a parte anterior da pergunta: por que 0 aparece na frente de 1 no resultado do console do código abaixo?

 setTimeout (function () {console.log (1);}); console.log (0);

De fato, definir o segundo parâmetro do setTimeout como 0s não significa executar a função imediatamente, mas apenas colocar a função na fila de código.

No exemplo a seguir, um manipulador de eventos é definido como um botão BTN. O manipulador de eventos define um cronômetro para ligar após 250ms. Depois de clicar neste botão, primeiro adicione o manipulador de eventos OnClick à fila. O temporizador é definido após a execução do programa. Após 250ms, o código especificado é adicionado à fila e aguarde a execução.

 btn.OnClick = function () {setTimeout (function () {console.log (1);}, 250);}

Se o manipulador de eventos OnClick no código acima for executado por 300ms, o código do timer deverá ser executado pelo menos 300ms após o timer estiver definido. Todo o código na fila deve esperar até que o processo JavaScript esteja ocioso, independentemente de como eles são adicionados à fila.

Conforme mostrado na figura, embora o código do timer tenha sido adicionado em 255ms, ele não pode ser executado no momento porque o manipulador de eventos OnClick ainda está em execução. O código do timer mais antigo pode ser executado está em 300ms, ou seja, depois que o manipulador de eventos ONCLICK terminar

Problema setInterval

O problema com o uso do setInterval () é que o código do timer pode não ter sido executado antes que o código seja adicionado à fila novamente, resultando no código do timer em execução várias vezes em uma linha sem nenhuma pausa entre eles. A solução para esse problema pelo mecanismo JavaScript é adicionar o código do timer à fila ao usar o setInterval (). Isso garante que o intervalo de tempo mínimo para o código do timer seja adicionado à fila é o intervalo especificado

No entanto, isso pode levar a dois problemas: 1. Alguns intervalos são ignorados; 2. O intervalo entre a execução do código de vários temporizadores pode ser menor do que o esperado

Suponha que um certo manipulador de eventos OnClick defina um timer de intervalo de 200 mm usando SerInterval (). Se o manipulador de eventos levar mais de 300ms para concluir e o código do timer também levará ao mesmo tempo, um determinado intervalo será ignorado ao mesmo tempo.

O primeiro temporizador no exemplo é adicionado à fila a 205ms, mas não pode ser executado até que 300ms se passaram. Quando esse código do timer é executado, outra cópia é adicionada à fila a 405ms. No próximo intervalo, 605ms, o código do primeiro temporizador ainda está em execução e já existe uma instância do código do timer na fila. Como resultado, o código do timer neste momento não será adicionado à fila

Itera o setTimeout

Para evitar o problema do timer setInterval (), você pode usar a chamada Settimeout () encadeada ()

 setTimeout (function fn () {setTimeout (fn, interval);}, intervalo);

Essa cadeia de padrões chama setTimeout () e um novo timer é criado toda vez que a função é executada. O segundo setTimeout () chama a função atualmente executada e define outro temporizador para ela. A vantagem disso é que o novo código do timer não é inserido na fila até que o código do timer anterior seja executado, garantindo que não haja intervalos ausentes. Além disso, garante que, antes que o próximo código do timer seja executado, pelo menos o intervalo especificado deva ser esperado, evitando a operação contínua.

Use setInterval ()

 <div id = "mydiv" style = "altura: 100px; largura: 100px; cor de fundo: rosa; posição: absoluto; esquerda: 0;"> </div> <cript> mydiv.onClick = function () {var timer = setInterval (function () {if (parseInt (mydiv.style.lefter) {) {if (parseInt (mydiv.style.lefter) {) {if (parseInt (mydiv.style.lefnter) {) {if (parseInt (mydiv.style.lefter) {) {se false;} mydiv.style.left = parseint (mydiv.style.left) + 5 + 'px'; } </script>

Use Settimeout de Use Chazed ()

 <div id = "mydiv" style = "altura: 100px; largura: 100px; cor de fundo: rosa; posição: absoluto; esquerda: 0;"> </div> <cript> mydiv.onClick = function () {Settimeout (função fn () {if (parseInt (mydiv.style.let) <= 200) {setepttime {) {se false;} mydiv.style.left = parseint (mydiv.style.left) + 5 + 'px'; } </script>

aplicativo

Use temporizadores para ajustar a sequência de eventos

[1] No desenvolvimento da Web, um evento ocorre pela primeira vez no elemento filho e depois borbulha até o elemento pai, ou seja, a função de retorno de chamada do evento do elemento filho será acionada anteriormente à função de retorno de chamada do evento do elemento pai. Se primeiro deixarmos a função de retorno de chamada do elemento dos pais, precisamos usar o setTimeout (f, 0)

Em circunstâncias normais, clique no elemento div, primeiro pop -up 0 e depois apareça 1

 <div id = "mydiv" style = "altura: 100px; largura: 100px; cor de fundo: rosa;"> </div> <cript> mydiv.onclick = function () {alert (0);} document.onclick = function () {alert (1);} </script>

Se você deseja que o evento OnClick do documento aconteça primeiro, ou seja, clique no elemento div, 1 aparecerá primeiro e depois 0 aparecerá. Em seguida, faça as seguintes configurações

 <div id = "mydiv" style = "altura: 100px; largura: 100px; cor de fundo: rosa;"> </div> <cript> mydiv.onclick = function () {setTimeout (function () {alert (0);})} document.onclick = function () {alert (1);

【2】 Função de retorno de chamada definida pelo usuário, geralmente acionada antes da ação padrão do navegador. Por exemplo, se um usuário inserir texto na caixa de entrada, o evento KeyPress será acionado antes que o navegador receba o texto. Portanto, a seguinte função de retorno de chamada não pode atingir seu objetivo

 <input type = "text" id = "myInput"> <Cript> myInput.onkeypress = function (event) {this.value = this.value.TOUPPERCASE ();} </script>

O código acima deseja converter os caracteres em capitalização imediatamente após o usuário inserir o texto. Mas, de fato, ele só pode converter o personagem anterior em capitalização, porque o navegador não recebeu o texto no momento, então esse valor não pode obter o caractere de entrada mais recente.

Somente reescrevendo -o com o setTimeout, o código acima pode funcionar

 <input type = "text" id = "myInput"> <Cript> myInput.onkeypress = function (event) {setTimeout (function () {myInput.value = myinput.value.touppercase ();});} </script>

O código termina aqui. O próximo artigo o apresentará a você

Série BOM: requestanimationframe

O terceiro aplicativo do Bom Series (relógio, contagem regressiva, cronômetro e despertador)

O acima é o primeiro timer settimeout e setInterval da série BOM apresentada a você pelo editor. 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!