Aprendi JS há alguns dias e vi duas funções muito interessantes, a saber, a função Settimeout e a função setInterval. Essas duas funções podem fazer com que as páginas da web apresentem efeitos muito comuns nas páginas da web, como carrosséis de imagens e alguns efeitos muito divertidos. Vamos aprender sobre essas duas funções abaixo!
A sintaxe e aplicação de uma função Settimeout e função setInterval
1. Função do Settimeout
Definição e uso: o método setTimeout () é usado para chamar uma função ou calcular uma expressão após o número especificado de milissegundos.
Sintaxe: setTimeout (código, milisec);
parâmetro:
Código (requerido): A sequência de código JavaScript a ser executada após a função a ser chamada.
Millisec (exigido): o número de milissegundos para esperar antes de executar o código.
dica:
setTimeout () executa o código apenas uma vez. Se você deseja ligar várias vezes, use setInterval () ou tenha o código em si chamada setTimeout () novamente.
Valor de retorno
Um valor que pode ser passado para Window.ClearTimeout () para cancelar a execução periódica do código.
Como o Settimeout é uma função do timer, existem funções para limpar o timer, por isso usamos a função ClearTimeout.
clearTimeout (valor de identificação retornado por setTimeout ());
2.Esterval Definição
O método setInterval () chama uma função ou calcula uma expressão de acordo com o período especificado (em milissegundos).
O método setInterval () chamará a função continuamente até que o ClearInterval () seja chamado ou a janela seja fechada. O valor de identificação retornado por setInterval () pode ser usado como um parâmetro para o método clearInterval ().
gramática
setInterval (código, milisec [, "lang"]);
O código do parâmetro é necessário. A função a ser chamada ou a sequência de código a ser executada.
Millisec deve. O intervalo entre execução periódica ou código de chamada, em milissegundos
Valor de retorno
Um valor que pode ser passado para Window.ClearInterval () para cancelar a execução periódica do código.
Como o Settimeout é uma função do timer, existem funções para limpar o timer, por isso usamos a função ClearInterval ().
clearInterval () (valor de identificação retornado por setInterval ());
2. Caso:
Efeito da contagem regressiva
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <titledwlown "> <tits) <tittps scrits/title/title/title/title/title/title"> " Método JS para obter o efeito da contagem regressiva var T1; window.onload = function () {// 01 Posição no botão Iniciar e retornar um objeto DOM var Btns = document.getElementById ('BTNSTART'); // 02. Registre o evento de clique para o botão Iniciar Btns.OnClick = function () {// Execute a função de que o primeiro parâmetro da função setInterval deve ser executado regularmente, e o segundo parâmetro é a função que executa todos os milissegundos T1 = setInterval (Iniciar, 1000); } // 03 Posição no botão Stop para retornar um objeto DOM var Btnst = document.getElementById ('Btnstop'); btnst.OnClick = function () {clearInterval (t1); }} // Função a ser executada 1 segunda função Start () {// 01. Obtenha o texto no div para atribuir a uma variável var divdom = document.getElementById ('msg'); var divnum = divdom.innerText; // julga se o valor do divnum é 0 se (divnum> 0) {divnum--; // Reatribua o valor subtraído para divnum divdom.innerText = divnum; }} </script> </adhead> <body> <input type = "button" id = "btnsstart" value = "start"/> <input type = "button" id = "btnstop" value = "stop"/> <r/> <div id = "msg"> 10 </div> </body> </html>Troca de imagem de fundo:
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-ttype" content = "text/html; charset = utf tigns-8"/> <> 1; // Defina a variável inicial para a primeira imagem por padrão de janela.onload = function () {// Defina a função Mostrar a cada segundo usando a função do timer para executar o setInterval (show, 1000); } // A função a ser executada da função mostra () {// Se a imagem atingir a última (5 imagens), altere a próxima imagem exibida para a primeira. Se a última imagem não for alcançada, a próxima imagem será exibida se (contagem> 5) {count = 1; } else {count ++; } // Obtenha o objeto DOM com id myimg var domin = document.getElementById ("myimg"); // altere o atributo SRC apontando a tag IMG e altere a imagem dom.src = "image/"+count+".Nome chamador
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utftf-8"/> <> Array para salvar os dados básicos no Namer var data = ['zhang san', 'li si', 'wang er', 'xiao chen', 'xiao zhang']; var i = 0; // Declare uma variável inicial para permitir que a primeira pessoa seja exibida na página por padrão var T1; window.onload = function () {// 02. Obtenha o objeto DOM do botão Start-Name para registrar o evento de clique para o objeto var domin = document.getElementById ("mybtn"); Dom.OnClick = function () {// Use a função setInterval para chamar a função de resultado t1 = setInterval (start, 500); // Este método chama apenas o setTimeout (Stop, 6000); } // Defina uma função anônima para atribuí -la a um resultado variável var start = function () {// 03gen o objeto de tag h1 e atribua um valor ao texto da tag h1 var dominh = document.getElementById ("myh1"); domh.innerText = dados [i % data.length]; // substitua o valor do elemento existente i ++; } // Chame a função anônima Start (); var stop = function () {// limpe o timer clearInterval (t1); // Os alunos que clicam na caixa de prompt aparecem e respondem alerta ("por favor" + document.getElementById ("myh1"). InnerText + "Os alunos respondem"); }}} </script> </ad Head> <body> <h1 id = "myh1"> </h1> <botão id = "mybtn"> comece a chamar </butão> </body> </html>Nos casos acima, acredito que todos devem estar familiarizados com essas duas funções.
O artigo acima tem um entendimento profundo da função Settimeout e da função setInterval. Este artigo é todo o conteúdo que compartilhei com você. Espero que possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.