Repita as ações em um intervalo de tempo javascript especificado. Exemplos da função jQuery setTimeout()

O método setInterval(), oferecido nas interfaces Window e Worker, chama repetidamente uma função ou executa um trecho de código, com um atraso fixo entre cada chamada.

pelas mesmas razões que tornam o uso de eval() um risco de segurança. atraso O tempo, em milissegundos (milésimos de segundo), que o temporizador deve atrasar entre as execuções da função ou código especificado. Veja abaixo detalhes sobre a faixa permitida de valores de atraso. arg1, ..., argN Opcional Argumentos adicionais que são passados ​​para a função especificada por

Nota: Passar argumentos adicionais para setInterval() na primeira sintaxe não funciona em

Internet Explorer

9 e anteriores. Se quiser habilitar esta funcionalidade nesse navegador, você deve usar um polyfill (veja a seção).

O intervalID retornado é um valor numérico diferente de zero que identifica o temporizador criado pela chamada para setInterval() ; este valor pode ser passado para cancelar o tempo limite.

Var intervalID = window.setInterval(myCallback, 500, "Parâmetro 1", "Parâmetro 2"); function myCallback(a, b) ( // Seu código aqui // Os parâmetros são puramente opcionais. console.log(a); console.log(b); )

O exemplo a seguir chama a função flashtext() uma vez por segundo até que o botão Parar seja pressionado.

exemplo setInterval/clearInterval var nIntervId;

função changeColor() ( nIntervId = setInterval(flashText, 1000); ) função flashText() ( var oElem = document.getElementById("my_box"); oElem.style.color = oElem.style.color == "vermelho" ? " blue" : "red"; // oElem.style.color == "red" ? "blue" : "red" é um operador ternário. ) function stopTextColor() ( clearInterval(nIntervId); )

Exemplo 3: simulação de máquina de escrever

O exemplo a seguir simula uma máquina de escrever limpando primeiro e depois digitando lentamente o conteúdo no NodeList que corresponde a um grupo especificado de seletores.< nPos) { return true; } var oRel, bExit = false; if (aMap.length === nPos) { aMap.push(0); } while (aMap < oSheet.parts.length) { oRel = oSheet.parts]; scroll(oRel, nPos + 1, bEraseAndStop) ? aMap++ : bExit = true; if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) { bExit = true; oCurrent = oRel.ref; sPart = oCurrent.nodeValue; oCurrent.nodeValue = ""; } oSheet.ref.appendChild(oRel.ref); if (bExit) { return false; } } aMap.length--; return true; } function typewrite () { if (sPart.length === 0 && scroll(aSheets, 0, true) && nIdx++ === aSheets.length - 1) { clean(); return; } oCurrent.nodeValue += sPart.charAt(0); sPart = sPart.slice(1); } function Sheet (oNode) { this.ref = oNode; if (!oNode.hasChildNodes()) { return; } this.parts = Array.prototype.slice.call(oNode.childNodes); for (var nChild = 0; nChild < this.parts.length; nChild++) { oNode.removeChild(this.parts); this.parts = new Sheet(this.parts); } } var nIntervId, oCurrent = null, bTyping = false, bStart = true, nIdx = 0, sPart = "", aSheets = , aMap = ; this.rate = nRate || 100; this.play = function () { if (bTyping) { return; } if (bStart) { var aItems = document.querySelectorAll(sSelector); if (aItems.length === 0) { return; } for (var nItem = 0; nItem < aItems.length; nItem++) { aSheets.push(new Sheet(aItems)); /* Uncomment the following line if you have previously hidden your elements via CSS: */ // aItems.style.visibility = "visible"; } bStart = false; } nIntervId = setInterval(typewrite, this.rate); bTyping = true; }; this.pause = function () { clearInterval(nIntervId); bTyping = false; }; this.terminate = function () { oCurrent.nodeValue += sPart; sPart = ""; for (nIdx; nIdx < aSheets.length; scroll(aSheets, 0, false)); clean(); }; } /* usage: */ var oTWExample1 = new Typewriter(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15); /* default frame rate is 100: */ var oTWExample2 = new Typewriter("#controls"); /* you can also change the frame rate value modifying the "rate" property; for example: */ // oTWExample2.rate = 150; onload = function () { oTWExample1.play(); oTWExample2.play(); }; span.intLink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ }

Máquina de escrever JavaScript - MDN Exemplo de função Máquina de escrever (sSelector, nRate) (função clean() (clearInterval(nIntervId); bTyping = false; bStart = true; oCurrent = null; aSheets.length = nIdx = 0; ) função scroll (oSheet, nPos , bEraseAndStop) ( if (!oSheet.hasOwnProperty("partes") || aMap.length

CopyLeft 2012 da Mozilla Developer Network

Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. Em tincidunt tincidunt tincidunt.

Máquina de escrever JavaScript
Nullam comodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus Tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Mecenas vestibulum mollis nunc em posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.

Duis lobortis sapien quis nisl luctus porttitor. In tempor sempre libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida ne. Curabitur elementum nisi a eros rutrum nec blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nada fácil. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, at fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.

Nam faucibus, ligula eu fringilla pulvinar, lectus Tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem veículos egestas.

Conforme discutido anteriormente, o Internet Explorer versões 9 e anteriores não suportam a passagem de argumentos para a função de retorno de chamada em setTimeout() ou setInterval() . O código específico do IE a seguir demonstra um método para superar essa limitação. Para usar, basta adicionar o seguinte código no topo do seu script.

Outra possibilidade é usar uma função anônima para chamar seu retorno de chamada, embora esta solução seja um pouco mais cara. Exemplo:

Var intervalID = setInterval(function() ( myFunc("um", "dois", "três"); ), 1000);

Guias inativas Requer Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)

O problema "este"

Explicação

MeuArray = ["zero", "um", "dois"]; myArray.myMethod = function (sProperty) ( alert(arguments.length > 0 ? this : this); ); meuArray.meuMetodo(); // imprime "zero, um, dois" myArray.myMethod(1); // imprime "um" setTimeout(myArray.myMethod, 1000); // imprime "" após 1 segundo setTimeout(myArray.myMethod, 1500, "1"); // imprime "indefinido" após 1,5 segundos // passar o objeto "this" com .call não funcionará // porque isso mudará o valor de this dentro do próprio setTimeout // enquanto queremos alterar o valor de this dentro de myArray .myMethod // na verdade, será um erro porque o código setTimeout espera que este seja o objeto da janela: setTimeout.call(myArray, myArray.myMethod, 2000); // erro: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Operação ilegal no objeto protótipo WrappedNative" setTimeout.call(myArray, myArray.myMethod, 2500, 2);

Como você pode ver, não há maneiras de passar o objeto this para a função de retorno de chamada no JavaScript legado.

Uma maneira possível de resolver o problema "este" é substituir as duas funções globais nativas setTimeout() ou setInterval() por duas não nativo aqueles que permitem sua invocação através do método Function.prototype.call. O exemplo a seguir mostra uma possível substituição:

// Habilita a passagem do objeto "this" pelos temporizadores JavaScript var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; window.setTimeout = função (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) ( var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeST__(vCallback instanceof Function ? function () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay ); window.setInterval = function (vCallback, nDelay /*, argumentToPass1, argumentToPass2, etc. */) ( var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeSI__(vCallback instanceof Function ? function () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay );

Essas duas substituições também permitem a passagem padrão HTML5 de argumentos arbitrários para as funções de retorno de chamada de temporizadores no IE. Então eles podem ser usados ​​como não compatível com o padrão polyfills também. Veja o por um compatível com o padrão polifill.

Teste de novo recurso:

MeuArray = ["zero", "um", "dois"]; myArray.myMethod = function (sProperty) ( alert(arguments.length > 0 ? this : this); ); setTimeout(alert, 1500, "Olá mundo!"); // o uso padrão de setTimeout e setInterval é preservado, mas... setTimeout.call(myArray, myArray.myMethod, 2000); // imprime "zero,um,dois" após 2 segundos setTimeout.call(myArray, myArray.myMethod, 2500, 2); // imprime "dois" após 2,5 segundos

Para uma versão mais complexa, mas ainda modular ( Demônio) consulte Gerenciamento de Daemons JavaScript . Esta versão mais complexa nada mais é do que uma coleção grande e escalável de métodos para o Demônio construtor. No entanto, o Demônio o construtor em si nada mais é do que um clone do MiniDaemon com um suporte adicional para iniciar e começar funções declaradas durante a instanciação do daemon. Então o MiniDaemon framework continua sendo o caminho recomendado para animações simples, porque Demônio sem sua coleção de métodos é essencialmente um clone dele.

MiniDaemon passa argumentos para a função de retorno de chamada. Se você quiser trabalhar nisso com navegadores que nativamente não suportam esse recurso, use um dos métodos propostos acima.

var meuDaemon = new MiniDaemon( esteObjeto, ligar de volta[ , avaliar [, comprimento]]);

A função setInterval() é comumente usada para definir um atraso para funções que são executadas repetidamente, como animações. Você pode cancelar o intervalo usando WindowOrWorkerGlobalScope.clearInterval() .

Se você deseja que sua função seja chamada uma vez após o atraso especificado, use .

É possível que os intervalos sejam aninhados; ou seja, o retorno de chamada para setInterval() pode, por sua vez, chamar setInterval() para iniciar outro intervalo em execução, mesmo que o primeiro ainda esteja em andamento. desempenho, uma vez que os intervalos sejam aninhados além de cinco níveis de profundidade, o navegador imporá automaticamente um valor mínimo de 4 ms para o intervalo. As tentativas de especificar um valor menor que 4 ms em chamadas profundamente aninhadas para setInterval() serão fixadas em 4 ms.

Os navegadores podem impor valores mínimos ainda mais rigorosos para o intervalo em algumas circunstâncias, embora estes não devam ser comuns. Observe também que o tempo real decorrido entre as chamadas para o retorno de chamada pode ser maior que o atraso determinado; consulte Razões para atrasos maiores que o especificado em WindowOrWorkerGlobalScope.setTimeout() para obter exemplos.

Se houver a possibilidade de sua lógica demorar mais para ser executada do que o tempo de intervalo, é recomendável chamar recursivamente uma função nomeada usando setTimeout() . Por exemplo, se usar setInterval() para pesquisar um servidor remoto a cada 5 segundos, a latência da rede, um servidor que não responde e uma série de outros problemas podem impedir que a solicitação seja concluída no tempo alocado. Dessa forma, você pode se deparar com solicitações XHR na fila que não retornarão necessariamente em ordem.

Na programação em linguagens de script, periodicamente é necessário criar uma pausa - pausar a execução do programa por um tempo e depois continuar trabalhando. Por exemplo, em scripts VBS e PHP, os seguintes métodos são possíveis:

VBS: wscript.sleep 1500 (parar por 1,5 segundos)

PHP: dormir(10); (pare por 10 segundos)

Durante essas pausas, o sistema de tempo de execução (PHP ou VBS) não faz nada. Um desenvolvedor que tentar usar intuitivamente algo semelhante em Javascript ficará desagradavelmente surpreso. Erro comum ao tentar criar uma pausa em Javascript fica assim:

Função badtest() ( for (var i=1; i< 10; i++) { window.setTimeout("document.getElementById("test1").value += " + i, 900) } }

Você acha que quando, durante o loop, chegar a vez de desenhar o próximo número, seu setTimeout irá honestamente interromper o funcionamento do Javascript, esperar 0,9 segundos, adicionar o número desejado ao final do campo de entrada e continuar trabalhando. Mas na realidade não é esse o caso: setInterval e setTimeout em Javascript apenas atrasam a execução da ação (ou função) especificada entre parênteses. Em nosso exemplo, acontecerá o seguinte:

Imediatamente significa, por exemplo, 1 ms (ou seja, desproporcionalmente pequeno em comparação com 900 ms): o loop fará seu trabalho quase instantaneamente, criando diversas tarefas adiadas no mesmo momento. Isso significa que todas as tarefas pendentes de “sorteio” ​​serão concluídas quase ao mesmo tempo, sem pausas entre a adição de novos números. O ciclo começa; tudo congela por 0,9 s; e shirr - todos os números são disparados em sequência, um após o outro.

Como aplicar setTimeout corretamente nesse caso? É complicado. Você terá que chamar a função recursivamente(de dentro da função a mesma função), e para que esse processo não seja infinito, defina uma condição de parada (por exemplo, o tamanho do número a ser impresso):

Função welltest() ( if (i< 9) { document.getElementById("test2").value += ++i window.setTimeout("welltest()", 400) } }

E a variável i terá que ser inicializada fora da função - por exemplo, assim:

Agora tudo funciona como deveria (reduzimos o tempo de atraso de 0,9 s para 0,4 s). Mas para tais tarefas, é mais lógico usar setInterval em vez de setTimeout (embora isso exija duas funções):

Função besttest() ( window.i = 0 window.timer1 = window.setInterval("draw()", 400) ) função draw() ( document.getElementById("test3").value += ++i if (i >= 9) clearInterval(window.timer1) )

A peculiaridade do método Javascirpt setInterval é que ele não passa “por si só”; deve ser interrompido com um método clearInterval especial. E para deixar claro o que exatamente parar, a tarefa para a ação adiada recebe um identificador especial - um cronômetro: window.timer1 = window.setInterval(...) .

Os identificadores também podem ser atribuídos a tarefas criadas pelo método setTimeout. Todos os IDs de temporizador devem ser distintos uns dos outros (exclusivos na janela atual do navegador). Então você pode criar várias tarefas diferentes na janela que utilizam ações adiadas, e essas tarefas serão executadas em paralelo (mais ou menos simultaneamente, se o computador tiver recursos suficientes), o que é basicamente impossível em PHP ou VBS.

Aqui está um exemplo de página com vários temporizadores Javascript rodando simultaneamente: setinterval.htm (funções Javascript no arquivo setinterval.js). Todos os temporizadores de página (exceto menu) podem ser interrompidos usando a tecla Esc. Todos os temporizadores de exemplo são baseados em uma contagem regressiva “natural” (e não abstrata i++) - tempo ou distância. Todos os “relógios” são especialmente dessincronizados (para maior clareza). Os temporizadores dependentes da distância são usados ​​no “indicador” e no menu suspenso (“pull-out”).

Nosso menu deslizante é na verdade deslizante (abaixo do “cabeçalho”): espaços são deixados especialmente entre os elementos para que você possa ver como ele desliza para fora. Inesperadamente, descobrimos que não conseguimos fazer a saída igualmente suave para listas de diferentes comprimentos - provavelmente devido ao baixo desempenho do computador (AMD Athlon 999 MHz).

É bastante óbvio que para beleza e harmonia é necessário que as listas dos diferentes itens do menu apareçam ao mesmo tempo. Ou seja, listas mais longas deveriam ser eliminadas com mais alta velocidade, os mais curtos - em velocidade menor. Parece que poderia ser implementado assim:

Por essa lógica, se a lista suspensa tiver 200px de altura, devemos movê-la um pixel para baixo a cada 1ms. Mas essa velocidade não funciona em nosso computador - o navegador simplesmente não tem tempo para desenhar uma nova posição na lista em um milissegundo. Sim. Javascript consegue contar (o que há para contar?), mas o navegador (Firefox) não tem tempo de exibir. Situação típica da web.

Portanto, é possível equalizar mais ou menos o horário de saída do cardápio apenas com o auxílio de muletas, e ainda não está claro como isso funcionará por mais computador rápido. Mas devemos contar com o mais lento, certo? O algoritmo (sem levar em conta a velocidade do computador) é mais ou menos assim:

Agora as listas estão mais ou menos saindo. Por um tempo mais ou menos semelhante. Na página setinterval.htm.

E aí vem Bruce:

Função slide_do(obj, maxtop, offset) ( if (getTopLeft(obj).top< maxtop) { obj.style.top = getTopLeft(obj).top + offset } else { if (obj && obj.timer1) { clearInterval(obj.timer1) obj.timer1 = null } } }

A função em si, que empurra listas aninhadas para fora do menu, é, como podemos ver, muito simples. Tudo o que resta é executá-lo com algo como esta linha:

Ts.timer1 = setInterval(function())(slide_do(ts, maxtop, offset)), atraso)

Bem, antes de começar, basta calcular todos esses maxtop e offset, e também colocar a lista na posição mintop. Isso é o que faz a função “preliminar” slide() de 40 linhas. E todos juntos - no arquivo setinterval.js. Sim, e essa porcaria não funcionará sem o arquivo de estilos incluído

É extremamente importante entender como funcionam os temporizadores JavaScript. Freqüentemente, seu comportamento não corresponde à nossa compreensão intuitiva de multithreading, e isso se deve ao fato de que, na realidade, eles são executados em um único thread. Vejamos quatro funções com as quais podemos gerenciar temporizadores:

• var id = setTimeout(fn, atraso); - Cria um temporizador simples que chamará uma determinada função após um determinado atraso. A função retorna um ID exclusivo com o qual o cronômetro pode ser pausado.
• var id = setInterval(fn, atraso); - Semelhante ao setTimeout, mas chama a função continuamente em um determinado intervalo (até parar).
• clearInterval(id);, clearTimeout(id); - Aceita um ID de timer (retornado por uma das funções descritas acima) e interrompe a execução do callback"a.

Há muitas informações a serem obtidas nesta figura, mas compreendê-las lhe dará uma compreensão mais profunda de como funciona a assincronia do JavaScript. Este gráfico representa o tempo verticalmente em milissegundos, os blocos azuis mostram blocos de código JavaScript que foram executados. Por exemplo, o primeiro bloco é executado em média em 18ms, um clique do mouse bloqueia a execução por cerca de 11ms, etc.

JavaScript só pode executar um pedaço de código (devido à natureza de execução de thread único), cada um dos quais bloqueia a execução de outros eventos assíncronos. Isso significa que quando ocorre um evento assíncrono (como um clique do mouse, uma chamada de timer ou a conclusão de uma solicitação XMLHttp), ele é adicionado a uma fila e executado posteriormente (a implementação varia de acordo com o navegador, é claro, mas vamos concordar em chame isso de "fila").

Para começar, vamos imaginar que dois timers iniciam dentro de um bloco JavaScript: setTimeout com atraso de 10ms e setInterval com o mesmo atraso. Dependendo de quando o cronômetro for iniciado, ele será acionado no momento em que ainda não tivermos concluído o primeiro bloco de código. Observe, entretanto, que ele não é acionado imediatamente (isso não é possível devido ao threading único). Em vez disso, a função adiada é colocada na fila e executada no próximo momento disponível.

Além disso, durante a execução do primeiro bloco JavaScript, ocorre um clique do mouse. O manipulador para este evento assíncrono (e é assíncrono porque não podemos prevê-lo) não pode ser executado imediatamente neste momento, portanto também termina em uma fila, como o cronômetro.

Após a execução do primeiro bloco de código JavaScript, o navegador faz a pergunta: “O que está esperando para ser executado?” EM nesse caso O manipulador de cliques do mouse e o cronômetro estão em estado pendente. O navegador seleciona um deles (o manipulador de cliques) e o executa. O cronômetro aguardará o próximo período disponível na fila de execução.

Observe que enquanto o manipulador de clique do mouse está em execução, o primeiro retorno de chamada de intervalo é acionado. Assim como o retorno de chamada do timer, ele será colocado na fila. No entanto, observe que quando o intervalo for acionado novamente (enquanto o retorno de chamada do timer estiver em execução), ele será removido da fila. Se todos os retornos de chamada de intervalo fossem enfileirados enquanto um grande pedaço de código estava em execução, isso resultaria em um monte de funções esperando para serem chamadas, sem períodos de atraso entre elas para terminar a execução. Em vez disso, os navegadores tendem a esperar até que não haja mais funções. deixado na fila antes de adicionar outro à fila.

Assim, podemos observar o caso em que o terceiro disparo do callback de intervalo coincide com o momento em que ele já foi executado. Isso ilustra um ponto importante: os intervalos não se importam com o que está em execução no momento, eles serão adicionados à fila sem levar em conta o período de atraso entre as execuções.

Finalmente, após a conclusão do segundo retorno de chamada de intervalo, veremos que não resta mais nada para o mecanismo JavaScript executar. Isso significa que o navegador aguarda novamente a ocorrência de novos eventos assíncronos. Isso acontecerá na marca de 50 ms, onde o retorno de chamada em intervalo funcionará novamente. Neste ponto não haverá nada para bloqueá-lo, então funcionará imediatamente.

Vejamos um exemplo que ilustra bem a diferença entre setTimeout e setInterval.
setTimeout(function())( /* Algum longo bloco de código... */ setTimeout(arguments.callee, 10); ), 10);
setInterval(function())( /* Algum bloco longo de código... */ ), 10);

Estas duas opções são equivalentes à primeira vista, mas na realidade não são. O código que usa setTimeout sempre terá um atraso de pelo menos 10ms após a chamada anterior (pode ser mais, mas nunca menos), enquanto o código que usa setInterval tenderá a ser chamado a cada 10ms, independente de quando ocorreu a chamada anterior.
Vamos resumir tudo o que foi dito acima:
- As funções setTimeout e setInterval são executadas de maneira fundamentalmente diferente em código assíncrono,
- Se o temporizador não puder ser executado em no momento, será atrasado até o próximo ponto de execução (que será maior que o atraso desejado),
- Intervalos (setInterval) podem ser executados um após o outro sem atraso se sua execução demorar mais que o atraso especificado.

Tudo isso é extremamente informações importantes para o desenvolvimento. Saber como o mecanismo JavaScript funciona, especialmente com muitos eventos assíncronos (o que acontece com frequência), estabelece uma excelente base para a construção de aplicativos avançados.

Fonte: http://learn.javascript.ru/settimeout-setinterval

Quase todas as implementações de JavaScript possuem um agendador de cronômetro interno que permite agendar uma função para ser chamada após um período de tempo especificado.

Em particular, esse recurso é compatível com navegadores e no servidor Node.JS.

Sintaxe:

Parâmetros:

• função/código
  • Uma função ou linha de código a ser executada.
  • A string é mantida para compatibilidade e não é recomendada.
• função
  • Latência em milissegundos, 1000 milissegundos equivalem a 1 segundo.
• arg1, arg2…
  • Argumentos a serem passados ​​para a função. Não suportado no IE9-.
  • A função será executada após o tempo especificado no parâmetro delay.

Por exemplo, o código a seguir acionará alert("Hello") após um segundo:

Se o primeiro argumento for uma string, o interpretador cria uma função anônima a partir dessa string.

Ou seja, esta entrada funciona exatamente da mesma forma:

SetTimeout("alert("Olá")" , 1000 );

Use funções anônimas:

SetTimeout(função() (alerta("Olá")), 1000);

Em tudo navegadores modernos Dado o IE10, setTimeout permite especificar parâmetros de função.

O exemplo abaixo exibirá "Olá, sou Vasya" em todos os lugares, exceto no IE9-:

...No entanto, na maioria dos casos precisamos do suporte do antigo IE, e ele não permite especificar argumentos. Portanto, para transferi-los, eles envolvem a chamada em uma função anônima:

Chamar setTimeout não passa neste contexto.

Em particular, chamar um método de objeto via setTimeout funcionará no contexto global. Isto pode levar a resultados incorretos.

Por exemplo, vamos chamar user.sayHi() após um segundo:

Como setTimeout executará a função user.sayHi no contexto global, ele não terá acesso ao objeto por meio de this .

Em outras palavras, essas duas chamadas para setTimeout fazem a mesma coisa:

Felizmente, esse problema também é facilmente resolvido com a criação de uma função intermediária:

Uma função wrapper é usada para passar argumentos entre navegadores e preservar o contexto de execução.

A função setTimeout retorna um timerId que pode ser usado para cancelar a ação.

Sintaxe:

ClearTimeout(timerId)

No exemplo a seguir, definimos um tempo limite e depois excluímos (mudamos de ideia). Como resultado, nada acontece.

O método setInterval possui uma sintaxe semelhante a setTimeout.

O significado dos argumentos é o mesmo. Mas, diferentemente de setTimeout , ele não executa a função uma vez, mas a repete regularmente em um intervalo de tempo especificado. Você pode interromper a execução chamando:

ClearInterval(timerId)

O exemplo a seguir, quando executado, exibirá uma mensagem a cada dois segundos até você clicar no botão Parar:

var timer = setInterval(function () ( alert(i++) ), 2000 );

Enfileirando e sobrepondo chamadas em setInterval

A chamada setInterval(function, delay) faz com que a função seja executada no intervalo de tempo especificado. Mas há uma sutileza aqui.

Na verdade, a pausa entre as chamadas é menor que o intervalo especificado.

Ou seja, o navegador inicia o lançamento da função ordenadamente a cada 100ms, sem levar em conta o tempo de execução da função em si.

Acontece que a execução de uma função demora mais que o atraso. Por exemplo, a função é complexa, mas o atraso é pequeno. Ou a função contém instruções de alerta/confirmação/prompt que bloqueiam o thread de execução. É aqui que as coisas começam a ficar interessantes.

Se uma função não puder ser iniciada porque o navegador está ocupado, ela será colocada na fila e executada assim que o navegador estiver livre.

A imagem abaixo ilustra o que acontece com uma função que demora muito para ser executada.

A chamada de função iniciada por setInterval é adicionada à fila e ocorre imediatamente quando possível:

O segundo lançamento da função ocorre imediatamente após o término do primeiro:

A execução não é enfileirada mais de uma vez.

Se uma função demorar mais para ser executada do que várias execuções agendadas, ela ainda entrará na fila uma vez. Portanto não há “acúmulo” de lançamentos.

Na imagem abaixo, setInterval tenta executar a função em 200ms e enfileira a chamada. Aos 300ms e 400ms o cronômetro acorda novamente, mas nada acontece.

Chamar setInterval(function, delay) não garante atraso real entre as execuções.

Há casos em que o atraso real é maior ou menor que o especificado. Em geral, não é verdade que haverá pelo menos algum atraso.

Nos casos em que não apenas a repetição regular é necessária, mas também um atraso entre as execuções, setTimeout é usado para redefinir cada vez que a função é executada.

Abaixo está um exemplo que emite um alerta com intervalos de 2 segundos entre eles.

var timer = setTimeout(função run() ( alert(i++); timer = setTimeout(run, 2000 ); ), 2000 );

Atraso mínimo do temporizador

O cronômetro do navegador tem a latência mais baixa possível. Varia de aproximadamente zero a 4ms em navegadores modernos. Nos mais antigos pode ser maior e chegar a 15ms.

De acordo com a norma, o atraso mínimo é de 4ms. Portanto, não há diferença entre setTimeout(..,1) e setTimeout(..,4) .

O disparo pode ser muito menos frequente. Em alguns casos, o atraso pode não ser de 4ms, mas de 30ms ou até 1000ms.

A maioria dos navegadores (principalmente os de desktop) continuam a executar setTimeout / setInterval mesmo se a guia estiver inativa. Ao mesmo tempo, vários deles (Chrome, FF, IE10) reduzem a frequência mínima do temporizador para 1 vez por segundo. Acontece que o cronômetro funcionará na aba “segundo plano”, mas raramente.

Ao funcionar com bateria, em um laptop, os navegadores também podem reduzir a frequência para executar código com menos frequência e economizar bateria. O IE é especialmente famoso por isso. A redução pode chegar a várias vezes, dependendo das configurações. Se a carga da CPU for muito alta, o JavaScript poderá não conseguir processar os temporizadores em tempo hábil. Isso irá pular algumas execuções de setInterval.

Conclusão: vale a pena focar na frequência de 4ms, mas você não deve contar com isso.

Enviando intervalos para o console O código que conta os intervalos de tempo entre chamadas é mais ou menos assim:

Esse truque vale a pena entrar nos anais dos hacks de JavaScript.

A função é encapsulada em setTimeout(func, 0) se você quiser executá-la após o final do script atual.

O problema é que setTimeout nunca executa a função imediatamente. Ele apenas planeja sua implementação. Mas o interpretador JavaScript começará a executar as funções planejadas somente após a execução do script atual.

De acordo com o padrão, setTimeout não pode executar uma função com atraso de 0. Como dissemos anteriormente, o atraso normalmente será de 4ms. Mas o principal aqui é que a execução, em qualquer caso, ocorrerá após a execução do código atual.

Por exemplo:

Os métodos setInterval(func, delay) e setTimeout(func, delay) permitem que você execute func regularmente/uma vez a cada milissegundos de atraso.

Ambos os métodos retornam o ID do temporizador. É usado para interromper a execução chamando clearInterval / clearTimeout .

| | definirIntervalo | definirTempo limite | || ----------- | ---------- | | Tempo | A chamada é estritamente baseada em um cronômetro. Se o intérprete estiver ocupado, uma chamada será colocada na fila. O tempo de execução da função não é levado em consideração, portanto o intervalo de tempo entre o final de uma execução e o início de outra pode variar. | A chamada recursiva para setTimeout é usada em vez de setInterval onde é necessária uma pausa fixa entre as execuções. | | Atraso | Atraso mínimo: 4ms. | Atraso mínimo: 4ms. | | Recursos do navegador | Latência 0 não funciona no IE | No Opera, a latência zero equivale a 4ms, e outros atrasos são tratados com precisão, incluindo 1ms, 2ms e 3ms não padrão. |