Issue with implementing setTimeout on await fetch() result

Question

Issue with implementing setTimeout on await fetch() result

I'm trying to figure out how to add a setTimeout to my request response when using await fetch. Currently, each response is being sent to a DIV in the HTML, but I want to introduce a delay of 5 seconds before each response appears.

I attempted this solution, but unfortunately, it didn't work for me.

const envSoli = async () => {
    try {
      const controller = new AbortController();
      const signal = controller.signal;
      const timeId = setTimeout(() => {
        controller.abort();
      }, 20 * 1000); // 20 sec
      let peticion = await fetch("data.php", {
        method: "POST",
        body: "ajax=1&do=check&lista=" + encodeURIComponent(leray[chenille]),
        headers: { "Content-type": "application/x-www-form-urlencoded" },
        cache: "no-cache",
        signal: signal,
      });
      clearTimeout(timeId);
      const oreen = await peticion.json();
      const takeAMoment = setTimeout(() => {
        switch (oreen.enviando) {
            case -1:
              chenille++;
              document.getElementById("div1").append(oreen.cat + "<br />");
              updateProgress(chenille, leray.length);
              tvmit_wrongUp();
              break;
      
            case 1:
              chenille++;
              document.getElementById("div1").append(oreen.dog + "<br />");
              updateProgress(chenille, leray.length);
              tvmit_wrongUp();
              break;
      
            case 2:
              chenille++;
              document.getElementById("div2").append(oreen.sky + "<br />");
              nieva++;
              updateProgress(chenille, leray.length);
              tvmit_dieUp();
              break;
      
            case 3:
              chenille++;
              document.getElementById("div3").append(oreen.water + "<br />");
              tvmit_liveUp();
              updateProgress(chenille, leray.length);
              break;
          }
      
          OKTY(leray, chenille, aarsh, nieva);
          return true;
      }, 5 * 1000);
      clearTimeout(takeAMoment);
  
      
    } catch (error) {
      console.log(error);
      Swal.fire({
        text: translate("text2"),
        icon: "question",
        buttonsStyling: false,
        confirmButtonText: translate("confirmbtn"),
        allowOutsideClick: false,
        allowEscapeKey: false,
        customClass: {
          confirmButton: "btn btn-primary",
        },
        //refresh again on button click
      }).then(function () {
        location.reload();
      });
    }
  };
  envSoli();

UPDATED WORKING CODE:

const envSoli = async () => {
  try {
    const controller = new AbortController();
    const signal = controller.signal;
    const timeId = setTimeout(() => {
      controller.abort();
    }, 20 * 1000);
    let peticion = await fetch("data.php", {
      method: "POST",
      body: "ajax=1&do=check&lista=" + encodeURIComponent(leray[chenille]),
      headers: { "Content-type": "application/x-www-form-urlencoded" },
      cache: "no-cache",
      signal: signal,
    });
    clearTimeout(timeId);
    let oreen = await peticion.json();

    switch (oreen.enviando) {
      case -1:
        chenille++;
        document.getElementById("div1").append(oreen.cat + "<br />");
        updateProgress(chenille, leray.length);
        tvmit_wrongUp();
        break;

      case 1:
        chenille++;
        document.getElementById("div1").append(oreen.dog + "<br />");
        updateProgress(chenille, leray.length);
        tvmit_wrongUp();
        break;

      case 2:
        chenille++;
        document.getElementById("div2").append(oreen.sky + "<br />");
        nieva++;
        updateProgress(chenille, leray.length);
        tvmit_dieUp();
        break;

      case 3:
        chenille++;
        document.getElementById("div3").append(oreen.water + "<br />");
        tvmit_liveUp();
        updateProgress(chenille, leray.length);
        break;
    }

    OKTY(leray, chenille, aarsh, nieva);
    return true;
  } catch (error) {
    console.log(error);
    Swal.fire({
      text: translate("text2"),
      icon: "question",
      buttonsStyling: false,
      confirmButtonText: translate("confirmbtn"),
      allowOutsideClick: false,
      allowEscapeKey: false,
      customClass: {
        confirmButton: "btn btn-primary",
      },
      //refresh again on button click
    }).then(function () {
      location.reload();
    });
  }
};
envSoli();

javascript async-await fetch-api

Answer 1

Answer №1

The function setTimeout completes immediately without delaying the execution of the following statement. This means that your code effectively cancels the takeAMoment timeout right after setting it.

Since you have already declared a function with async, you should utilize await to introduce a delay in the function's execution.

To simplify the use of await with setTimeout, you can promisify it like this:

// Promisify setTimeout:
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

Then, when assigning to takeAMoment, implement it as follows:

        await delay(5 * 1000);
        switch (oreen.enviando) {
            // ...etc
        }

Answer 2

The function setTimeout completes immediately without delaying the execution of the following statement. This means that your code effectively cancels the takeAMoment timeout right after setting it.

Since you have already declared a function with async, you should utilize await to introduce a delay in the function's execution.

To simplify the use of await with setTimeout, you can promisify it like this:

// Promisify setTimeout:
const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

Then, when assigning to takeAMoment, implement it as follows:

        await delay(5 * 1000);
        switch (oreen.enviando) {
            // ...etc
        }

Answer 3

Answer №2

If you're looking to manage a series of updates, consider implementing a queue system. Start by initializing an empty array:

let updateQueue = [];

You can then use the push method to add new updates:

updateQueue.push(newUpdate);

To ensure a smooth flow of updates, you can utilize setInterval along with shift to retrieve one update every 5 seconds:

setInterval(() => {
  let currentUpdate = updateQueue.shift();
  if (currentUpdate) {
    currentUpdate();
  }
}, 5000);

Answer 4

If you're looking to manage a series of updates, consider implementing a queue system. Start by initializing an empty array:

let updateQueue = [];

You can then use the push method to add new updates:

updateQueue.push(newUpdate);

To ensure a smooth flow of updates, you can utilize setInterval along with shift to retrieve one update every 5 seconds:

setInterval(() => {
  let currentUpdate = updateQueue.shift();
  if (currentUpdate) {
    currentUpdate();
  }
}, 5000);

Issue with implementing setTimeout on await fetch() result

UPDATED WORKING CODE:

Answer №1

Answer №2

Similar questions

Focus on the original control that triggered a jQuery AJAX POST during a postback event

I am struggling with sending post requests in Node.js

Header formatting issue when attempting to implement tablesorter plugin

Incorporating a vanilla JS library (Pickr) into a NuxtJS page component

Retrieve the minimum and maximum values from a multi-dimensional array

Semantic UI Troubles: Unraveling the Sidebars and #pusher Defects

Suggestions for improving the way time durations are calculated using jQuery

What is the best way to toggle the visibility of a side navigation panel using AngularJS?

Tips for retrieving the final element from a corrupt JSON string using JavaScript

Choose an option from the dropdown menu when clicking on the radio button

Handling exceptions in AngularJS router-ui resolve functionality

"Learn how to handle exceptions in Nest JS when checking for existing users in MongoDB and creating a new user if the user does

Unable to find '/images/img-2.jpg' in the directory 'E:React eact-demosrc'

Problems with form functionality in React component using Material UI

Setting a value for the identifier just one time

Restore checkbox to default setting

Losing $scope reference when incorporating a directive within the controller scope

Problems Arising with Javascript Animation Functionality

Change button to an ajax spinner when it is clicked using jQuery

Unable to successfully transfer a document