setTimeout, setInterval e Como agendar tarefas em JavaScript

Os métodos setTimeout()e setInterval()são dois que você pode usar para agendar tarefas em JavaScript. Este tutorial mostrará como fazer isso. Ele apresentará os dois métodos. Ele mostrará como esses métodos funcionam. Também mostrará como usá-los para agendar a execução do seu código.

Uma introdução rápida

Geralmente, você deseja executar seu código enquanto o escreve. Dito isto, haverá situações em que você desejará atrasar a execução. Ou, você pode querer repetir a execução em intervalos específicos. O JavaScript fornece dois métodos, um para cada um desses objetivos. O setTimeout()para atrasar a execução e setInterval()repeti-la.

Há uma coisa interessante sobre esses dois métodos para agendar tarefas. Nenhum deles faz parte da especificação da linguagem JavaScript. Na verdade, esses métodos fazem parte da especificação HTML Living Standard , definida como “temporizadores”. Felizmente, eles são suportados em todos os navegadores, mesmo no Node.js. Assim, podemos usá-los com segurança. Vamos dar uma olhada neles.

O método setTimeout

O setTimeout()método permite que você execute seu código após um atraso. Você define esse atraso, em milissegundos, como um dos parâmetros que esse método aceita. Quando o setTimeout()método executa seu código, após o atraso, ele é executado apenas uma vez. Portanto, não é necessário se preocupar com a execução do código várias vezes.

O delayparâmetro é opcional. Você pode usá-lo, mas não precisa. Você logo aprenderá o porquê. Outro parâmetro que esse método aceita é uma função de retorno de chamada. Quando o atraso acaba, o setTimeout()método executa a função de retorno de chamada que você passou como argumento e qualquer conteúdo que você colocar dentro dela.

Além desses dois parâmetros, você também pode transmitir um número infinito de argumentos adicionais. Há duas coisas que você deve se lembrar se quiser passar argumentos adicionais. Primeiro, eles não funcionarão nas versões do Internet Explorer abaixo de 9. Isso provavelmente não é um problema hoje em dia.

O segundo pode ser mais importante. Se você deseja acessar esses argumentos adicionais, adicione parâmetros à sua função de retorno de chamada. Você pode usar esses parâmetros na função de retorno de chamada para acessar os dados desejados. Uma última coisa. Como função de retorno de chamada, você pode usar a função normal ou a seta , ambas funcionarão.

// setTimeout method syntax
setTimeout(callbackFunction, delay, argument1, argument2, ...)


// setTimeout method example no.1: with normal function
// Create a setTimeout method that waits for 2 seconds
// and then prints a message to console
setTimeout(function() {
  console.log('The time is up.')
}, 2000) // Delay is specified in milliseconds

// Output (after 2 seconds):
'The time is up.'


// setTimeout method example no.2: with arrow function
setTimeout(() => {
  console.log('The time is up.')
}, 2000) // Delay is specified in milliseconds

// Output (after 2 seconds):
'The time is up.'


// setTimeout method example no.3: additional arguments
// The "name" parameter is for accessing the 'John Doe'
// The "message" parameter is for accessing the 'Welcome back'
setTimeout((name, message) => {
  console.log(`${message} ${name}.`)
}, 2000, 'John Doe', 'Welcome back')
// Output (after 2 seconds):

'Welcome back John Doe.'

(Às vezes) setTimeout imediato

Como você acabou de aprender, o parâmetro delay é opcional. Quando você o omite, o setTimeout()método executa a função de retorno de chamada imediatamente. Bem, quase. A função de retorno de chamada será executada imediatamente apenas se não houver mais código a ser executado. Caso contrário, o retorno de chamada será executado depois que o restante do código for executado.

// Example no.1: setTimeout method that executes immediately
setTimeout(() => {
  console.log('I will be printed right away.')
}) // Omit the delay parameter

// Output (immediate):
'I will be printed right away.'


// Example no.2: setTimeout method that execute (almost) immediately
setTimeout(() => {
  console.log('I was supposed to be printed right away...')
})

console.log('I will be printed as first.')

function printMessage() {
  console.log('I will be printed as second.')
}

printMessage()

// Output:
'I will be printed as first.' // First console.log
'I will be printed as second.' // log in printMessage function
'I was supposed to be printed right away...' // Log in setTimeout

Cancelando setTimeout

Toda vez que você usa o setTimeout()método, ele retorna algo chamado “identificador de timer”. Esse identificador é útil quando você deseja cancelar o tempo limite existente que ainda não foi executado. Você pode fazer isso com o clearTimeout()método Este método aceita apenas um parâmetro, o identificador de timer de um tempo limite que você deseja cancelar.

Para limpar um tempo limite, você deve armazenar sua referência em algum lugar. Para fazer isso, você atribui o tempo limite a uma variável. Como setTimeout()retorna o identificador quando for declarado que o identificador será atribuído a essa variável. Você pode usar essa variável para cancelar o tempo limite.

// Create timeout and assign it to a variable
const newTimeout = setTimeout(() => {
  console.log('I was supposed to run after 3 seconds.')
}, 3000)

// Log the timer identifier of newTimeout
console.log(newTimeout)
// Output:
1

// Use clearTimeout() to cancel the "newTimeout" timeout
clearTimeout(newTimeout)

Quando você atribui tempo limite a uma variável, não precisa chamá-la, como se tivesse uma função. Quando você o atribui, o temporizador será executado automaticamente após o atraso. Ou, ele será executado imediatamente se não houver atraso e nenhum outro código a ser executado.

// Create timeout and assign it to a variable
const newTimeout = setTimeout(() => {
  console.log('I will run automatically.')
}, 3000)

// Output:
'I will run automatically after 3 seconds.'

Intervalos com o método setTimeout aninhado

Uma coisa interessante que você pode fazer com os setTimeout()métodos é aninhando-os. Isso significa que você pode colocar um tempo limite dentro de outro. Isso pode ser útil se você deseja executar algum código em intervalos diferentes. Quando se trata de aninhar, há duas coisas que você precisa saber.

A primeira coisa é que o navegador pode começar a penalizar seus tempos limite. Isso acontecerá se você criar cinco ou mais tempos limite aninhados. Nesse caso, o navegador forçará automaticamente o atraso a pelo menos quatro milissegundos. Se todos os seus intervalos aninhados usarem um atraso maior que quatro milissegundos, nada acontecerá.

A segunda coisa é que não é garantido que seus intervalos aninhados sejam executados com precisão no agendamento. A precisão dos atrasos na execução depende da carga da CPU, da execução de funções e de outras tarefas em execução no seu dispositivo no momento. Se o seu computador estiver ocupado, a programação poderá ter alguns pequenos atrasos adicionais.

// Extreme example of nested timeouts
setTimeout(() => {
  console.log('Timeout number 1.')

  setTimeout(() => {
    console.log('Timeout number 2.')

    setTimeout(() => {
      console.log('Timeout number 3.')

      setTimeout(() => {
        console.log('Timeout number 4.')

        setTimeout(() => {
          console.log('Timeout number 5.')

          setTimeout(() => {
            console.log('Timeout number 6.')
          }, 150)
        }, 350)
      }, 250)
    }, 150)
  }, 200)
}, 100)

// Output:
'Timeout number 1.'
'Timeout number 2.'
'Timeout number 3.'
'Timeout number 4.'
'Timeout number 5.'
'Timeout number 6.'

O método setInterval

O setInterval()método é útil quando você deseja executar algum código repetidamente nos mesmos intervalos. O setInterval()método tem a mesma sintaxe que o setTimeout()método. Ele aceita algumas funções de retorno de chamada, um atraso e argumentos opcionais adicionais. Esse atraso é o tempo que o setInterval()método espera até que ele execute o primeiro ou outro intervalo.

O setInterval()método funciona de maneira semelhante ao setTimeout()método. É executado automaticamente quando você o declara. Diferentemente do setTimeout()método, ele é executado até que você o interrompa ou cancele. Se você não parar, será executado para sempre.

// Create an interval that will run every 5 seconds
setInterval(() => {
  console.log('I will show up every 5 seconds.')
}, 5000) // Delay is in milliseconds

// Output:
'I will show up every 5 seconds.'
'I will show up every 5 seconds.'

Cancelando setInterval

Para interromper a setInterval()execução do método novamente, você deve usar o clearInterval()método O clearInterval()método funciona da mesma maneira que o clearTimeout()método. Ele também aceita apenas um parâmetro, o identificador de timer de um intervalo que você deseja cancelar.

O setInterval()método também retorna o identificador de timer que você pode passar para o clearInterval(). Como o setInterval()método é executado para sempre e requer cancelamento manual, geralmente é atribuído a uma variável. Quando você o atribui a uma variável, o identificador que ele retorna é atribuído a essa variável.

Agora, você pode passar essa variável para o clearInterval()método como um argumento para cancelar o intervalo.

// Example no.1: using setTimeout method to cancel interval
const myInterval = setInterval(() => {
  // Log some message
  console.log('I will be stopped soon.')
}, 500)

// Create timeout to stop the interval after 1 second
setTimeout(() => {
  clearInterval(myInterval)
}, 1000)

// Output:
'I will be stopped soon.'
'I will be stopped soon.'


// Example no.2: using clearInterval() inside setInterval method
// Create an interval and assign it to a variable
const myInterval = setInterval(() => {
  // Log some message
  console.log('I will run once.')

  // Cancel the interval
  clearInterval(myInterval)
}, 1000)

// Output:
'I will run once.'

Como você pode ver no exemplo acima, você também pode usar o clearInterval()método dentro do intervalo que deseja parar. Bem, você também pode usá-lo dentro do setTimeout()método, mas como ele é executado apenas uma vez, não faz sentido. No caso do setInterval()método, isso pode ser útil.

Por exemplo, você pode deixar o intervalo ser executado apenas uma vez. Para fazer isso, basta colocar o clearInterval()método em algum lugar da função de retorno de chamada. Em seguida, o setInterval()método executará o código dentro da função de retorno de chamada e será encerrado. Outra opção é usá-lo com a instrução [if… else].

Você pode usar esses dois juntos para cancelar o intervalo somente sob condições específicas. Caso contrário, se a condição não for atendida, você poderá deixar o intervalo executar outra iteração.

// Create an interval and assign it to a variable
const myInterval = setInterval(() => {
  // Log some message
  console.log('Still running.')

  // Cancel the interval only if condition is met
  if (Math.floor(Math.random() * 5) === 3) {
    clearInterval(myInterval)

    // Log confirmation message
    console.log('Interval cleared.')
  }
}, 500)

// Output:
'Still running.'
'Still running.'
'Still running.'
'Still running.'
'Still running.'
'Still running.'
'Still running.'
'Still running.'
'Still running.'
'Still running.'
'Still running.'
'Interval cleared.'

Combinando setTimeout e setInterval

Ambos, setTimeoute setInterval, são ferramentas muito úteis para agendar tarefas. Eles podem ser ainda mais úteis quando você os combina. Por exemplo, você pode usar setIntervalpara observar algo em intervalos específicos, como alterações no DOM ou resposta do servidor, se você não puder usar async / waitit ou promessas .

Junto com isso, setTimeoutcomo algo como um substituto. Se não houver alteração no DOM após algum tempo ou resposta de um servidor, você poderá usar o setTimeoutmétodo para cancelar o intervalo.

// Create interval to watch for change every .15 milliseconds
const myInterval = setInterval(function() {
  // If change happens
  if (/* some condition is true */) {
    // Cancel the interval
    clearInterval(myInterval)
  }
}, 150)

// Create a fallback to cancel the interval
// if change doesn't happen after
setTimeout(function() {
  // Clear the interval
  clearInterval(myInterval)
}, 6000)

Você também pode combinar esses dois métodos para agendar tarefas ao contrário. Por exemplo, você pode criar um intervalo com o setIntervalmétodo e colocá-lo dentro do setTimeoutmétodo para atrasá-lo. Em seguida, você também pode usar outro setTimeoutmétodo como fallback para cancelar o intervalo após algum tempo.

// Declare unassigned variable for interval
let myInterval

// Use timeout to delay first interval
setTimeout(function () {
  // Create interval and assign it to "myInterval" variable
  myInterval = setInterval(function () {
    // If change happens
    if (something) {
      // Cancel the interval
      clearInterval(myInterval)
    }
  }, 1000)
}, 2000)

// Create a fallback to cancel the interval
// if change doesn't happen after 9 seconds
setTimeout(function () {
  // Clear the interval
  clearInterval(myInterval)
}, 9000)

Conclusão: setTimeout, setInterval e como agendar tarefas em JavaScript

Os métodos setTimeout()e setInterval()são dois úteis que podem ajudá-lo a agendar tarefas e executar seu código de acordo com sua programação. Esses métodos podem parecer simples, mas podem ser muito poderosos, especialmente quando você os combina. Espero que este tutorial tenha ajudado você a entender como esses métodos funcionam, como usá-los e observar.