Explain the inner workings of the setTimeout() function in JavaScript

Question

Explain the inner workings of the setTimeout() function in JavaScript

My goal is to create a line in my code by placing points according to the line equation and adding a 100 millisecond delay before each point is displayed. However, when I try to run the code, it seems to wait for some time and then displays all the points at once without the desired delay.


function drawLine(x1, y1,x2,y2){
    var x, y, m;
    m=(y2-y1)/(x2-x1);

    for(x=x1;x<=x2;x++){
        y=(m*(x-x1)+y1)/6;
        setTimeout(drawPoint,100,x,y);
    }
}

function drawPoint(a,b){
    main=document.getElementById("main");     
    var children=main.childNodes;
    var child=document.createElement("div");

    child.className="anime";
    child.style.left=a+"px";
    child.style.top=300-b+"px";             

    main.appendChild(child);     
}

If anyone has any suggestions or solutions, they would be greatly appreciated.

javascript html css settimeout

Answer 1

Answer №1

When using a for-loop, it's important to note that it is non-blocking. This means that all the setTimeout instances within the loop will execute once the specified duration has elapsed.

One way to ensure that every handler in a loop is invoked in multiples of 100 milliseconds is to maintain a counter and use it as the milliseconds argument in each setTimeout() call.

function drawLine(x1, y1, x2, y2) {
  var x, y, m;
  m = (y2 - y1) / (x2 - x1);
  var counter = 1;
  for (x = x1; x <= x2; x++) {
    y = (m * (x - x1) + y1) / 6;
    setTimeout(drawPoint, (100 * counter), x, y);
    ++counter;
  }
}

function drawPoint(a, b) {
  main = document.getElementById("main"); //parent div tag in which children div tags are to be appended
  var children = main.childNodes;
  var child = document.createElement("div");
  child.className = "anime";
  child.style.left = a + "px";
  child.style.top = 300 - b + "px"; //300 is some offset
  main.appendChild(child);
}

Answer 2

When using a for-loop, it's important to note that it is non-blocking. This means that all the setTimeout instances within the loop will execute once the specified duration has elapsed.

One way to ensure that every handler in a loop is invoked in multiples of 100 milliseconds is to maintain a counter and use it as the milliseconds argument in each setTimeout() call.

function drawLine(x1, y1, x2, y2) {
  var x, y, m;
  m = (y2 - y1) / (x2 - x1);
  var counter = 1;
  for (x = x1; x <= x2; x++) {
    y = (m * (x - x1) + y1) / 6;
    setTimeout(drawPoint, (100 * counter), x, y);
    ++counter;
  }
}

function drawPoint(a, b) {
  main = document.getElementById("main"); //parent div tag in which children div tags are to be appended
  var children = main.childNodes;
  var child = document.createElement("div");
  child.className = "anime";
  child.style.left = a + "px";
  child.style.top = 300 - b + "px"; //300 is some offset
  main.appendChild(child);
}

Answer 3

Answer №2

Consider utilizing the setInterval() method as an alternative to setTimeout

Answer 4

Consider utilizing the setInterval() method as an alternative to setTimeout

Explain the inner workings of the setTimeout() function in JavaScript

Answer №1

Answer №2

Similar questions

Incorporating Ruby on Rails: Sending a fresh POST request to API and instantly

Creating an overflow effect for sliders using only CSS

Halt and anticipate a boolean reply from another function

When any part of the page is clicked, the data on the Angular page will automatically

Tips for choosing a visible element in Protractor while using AngularJS

The imported path is not found in Tsconfig

How can I adjust the size of my elements to be responsive in pixels

Is it possible to dynamically pass a component to a generic component in React?

Leveraging jQuery within a method defined in an object using MyObject.prototype.method and the 'this' keyword

Mastering the integration of this asmx webservice with jQuery/ajax

Is it secure to store the access token within the NextAuth session?

Adding variables to a div using jquery

Is there a way to verify HTML binding prior to setting up an AngularJS directive?

The export of 'alpha' is not available in the '@mui/system' module

What is the process for deleting an event in Vue?

I'm facing an issue where I am only able to update the first record in the database using axios and Post

Sorting a list with anchor tags alphabetically using Javascript/JQuery

Creating a list of identical elements with shared attribute values using nightwatch.js or JavaScript - a step-by-step guide

I am facing an issue where my Tailwind classes are not functioning properly when passed through props, but they work seamlessly when I directly link the Tailwind CSS using

When the Jqueryui dialog is closed, it effectively terminates the current JavaScript thread