waitElement

Descrição

Cria uma promise que resolve quando o elemento é encontrado no DOM. Se o elemento não for encontrado, a promise é rejeitada, lançando um erro.

Isso é útil especialmente util quando estamos trabalhando no checkout, onde o os elementos são renderizados somente depois de algum tempo.

API

waitElement<T>(
  selector: string, 
  options?: {
    maxTime?: number = 120000,
    interval?: number = 100,
  }): Promise<T>

Parâmetros

Parâmetro	Tipo	Descrição	Default
selector	string	Seletor CSS do elemento que queremos encontrar	-
maxTime	number	Tempo máximo para esperar o elemento aparecer no DOM	120000
interval	number	Intervalo de tempo entre cada tentativa de encontrar o elemento	100

Exemplos

Basico

// ou import { waitElement } from 'm3-utils'
import { waitElement } from 'm3-utils/waitElement'

const element1 = await waitElement('#my-element')

Typescript

import { waitElement } from 'm3-utils/waitElement'

// se voce estiver usando typescript, voce pode passar o tipo do elemento 
// que voce espera receber para ter tipos mais precisos
const link = await waitElement<HTMLAnchorElement>('#my-element')

Passando opções

import { waitElement } from 'm3-utils/waitElement'

const element1 = await waitElement('#my-element', {
  timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
  interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
})

const element1 = await waitElement('#my-element', {
  timeout: 30000,
  interval: 1, 
})
// quanto menor o intervalo, mais vezes por segundo a função vai verificar se 
// o elemento existe. Esse exemplo vai verificar  mil vezes por segundo.
// Isso pode ser útil quando o elemento é renderizado depois de um tempo muito curto.
// Porém, é importante ter cuidado para não sobrecarregar o browser.

then / catch

import { waitElement } from 'm3-utils/waitElement'

waitElement('#my-element')
  .then(element => {
    console.log('elemento encontrado')
  })
  .catch(error => {
    console.log('elemento não encontrado')
  })

info

na maioria dos casos, não é necessário passar nenhum valor para os parâmetros maxTime e interval.