Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

118
Vistas
Load Message and settimeout

I want to add loading message for export file button if it takes time to load for example first message "please wait" after 10 seconds settimeout to "loading..." after 20secound "sorry, please wait"

const [loading, setLoading] = useState(false);

function greet1() {
  return "please wait.."
}
function greet2() {
  return "loading"
}
function greet3() {
 return "sorry, please wait..."
}

const list= () => {
setLoading(true)
    if (loading) {
      setTimeout(() => {
        greet1
      }, 0);
      setTimeout(() => {
        greet2
      }, 2000);
      setTimeout(() => {
        greet3
      }, 3000);
    }
}

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

you can write:

if (loading) {
 let time = 0;
 setTimeout(() => {
  switch(time) {
   case 2:
    alert("please wait...");
    break;
   case 5:
    alert("loading...");
    break;
   case 10:
    alert("sorry, please wait...");
    break;
  }
  time++;
 }, 1000);
}
about 4 years ago · Juan Pablo Isaza Denunciar

0

In your specific case, you might do the following:

  1. You need to correct your syntax. Functions are invoked by using () following the namespace. E.g. greet1()
  2. Create a counter-based state (since it seems like your messages vary based on the "duration"). This allows us to determine the "time" that has passed.
const [downloadStatus, setDownloadStatus] = useState(0);
  1. Add a onClick listener to trigger the download.
const messageDownloadPairs = { 
  1: ["Message1", 0],
  2: ["Message2", 10 * 1000]
  3: ["Message3", 20 * 1000]
}
const getDownloadMessageTimePair = (status) => 
  messages[Math.min(status, Object.values(messages).length)]

with the following jsx under return

<button onClick={invokeDownload}>{getDownloadMessage(downloadStatus)[0]}</button>

where invokeDownload follows the signature

const invokeDownload = () => {
  // Your download code here.
  setDownloadStatus(1) // Notifying the component that the download has started.
}
  1. Create a function checkDownloadStatus to check if the download has completed. You can find some examples here
  2. Use the hook useEffect to handle timeouts, and state updates.
useEffect(() => { 
  const downloadComplete = checkDownloadStatus()

  if (!downloadComplete) { 
    const newDownloadStatus = downloadStatus + 1
    setTimeOut(
      () => setDownloadStatus(newDownloadStatus), 
      getDownloadMessageTimePair(downloadStatus)[1]
    )
  }
}, [downloadStatus])

With this, you have a "progress-supported" button to track your csv download. I'll update this when I get more information on the specifics of your project.

about 4 years ago · Juan Pablo Isaza Denunciar

0

I am not sure how is your code in React but in simple JS it works. Just tweak it for your need. Updated: added ability to write inside message div.

var message = document.getElementById("message");
function greet1() {
 message.innerHTML = "please wait..";
}
function greet2() {
   message.innerHTML= "loading";
}
function greet3() {
  message.innerHTML= "sorry, please wait...";
}
var loading = true;
    if (loading) {
      setTimeout(() => {
        greet1();
      }, 0);
      setTimeout(() => {
        greet2();
      }, 2000);
      setTimeout(() => {
        greet3();
      }, 3000);
    }
<div id="message" ></div>

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda