Javascript closures: a common pitfall

Question

Javascript closures: a common pitfall

I'm facing an issue with my code where it is not behaving as expected. Although I believe the code itself is correct, there seems to be a problem that I'm unable to identify. The goal of the code is to display numbers 10 through 0 with a 2-second interval between each number, i.e., 10-9-8... and so on. The current behavior is that it displays the numbers in ascending order instead of descending. I would prefer to use a for loop rather than seeking a workaround solution. Below you can find the snippet of my code:

function fadeOut(elem)
{
    for( var i=10; i>0; i-- )
    {
        (function(index)
        {
            setTimeout(function()
            {
                console.log(index);
            }, index * 2000);
        })(i);
    }
}

javascript settimeout

Answer 1

Answer №1

Start off by initiating a countdown: "After 10 seconds, display '10'."

Continue this pattern with decreasing numbers: "After 9 seconds, show '9'."

This sequence goes on until you reach the end: "After 1 second, reveal '1'."

Finally, after 999 milliseconds from the start, the last command is executed and it displays "1".

Give the following code snippet a try:

function fadeOut(elem)
{
    for( var i=10; i>0; i-- )
    {
        (function(index)
        {
            setTimeout(function()
            {
                console.log(index);
            }, (10-index) * 2000);
        })(i);
    }
}

Answer 2

Start off by initiating a countdown: "After 10 seconds, display '10'."

Continue this pattern with decreasing numbers: "After 9 seconds, show '9'."

This sequence goes on until you reach the end: "After 1 second, reveal '1'."

Finally, after 999 milliseconds from the start, the last command is executed and it displays "1".

Give the following code snippet a try:

function fadeOut(elem)
{
    for( var i=10; i>0; i-- )
    {
        (function(index)
        {
            setTimeout(function()
            {
                console.log(index);
            }, (10-index) * 2000);
        })(i);
    }
}

Answer 3

Answer №2

There are a total of 10 timeouts created, each with a decreasing time interval:

After 10 seconds - log 10
After 9 seconds - log 9
After 8 seconds - log 8
After 7 seconds - log 7

...

After 1 second - log 1

The objective is to extend the duration while reducing the counter value as demonstrated by the following JavaScript function:

function fadeOut(elem)
{
  for ( var i = 10; i > 0; --i )
  {
    (function(index)
     {
      setTimeout( function(){
        console.log(index);
      }, (11-index)*2000);
    })(i);
  }
}

<button onclick="fadeOut(this)">Click</button>

Answer 4

There are a total of 10 timeouts created, each with a decreasing time interval:

After 10 seconds - log 10
After 9 seconds - log 9
After 8 seconds - log 8
After 7 seconds - log 7

...

After 1 second - log 1

The objective is to extend the duration while reducing the counter value as demonstrated by the following JavaScript function:

function fadeOut(elem)
{
  for ( var i = 10; i > 0; --i )
  {
    (function(index)
     {
      setTimeout( function(){
        console.log(index);
      }, (11-index)*2000);
    })(i);
  }
}

<button onclick="fadeOut(this)">Click</button>

Javascript closures: a common pitfall

Answer №1

Answer №2

Similar questions

Show a variety of months using a datepicker arranged neatly in rows and columns

Sort out online notifications using client-side technology

What is the reason behind the delayed mutation of the state when invoking the setState method in React?

The operation of executing `mongodb - find()` does not exist as a function

Strategies for managing extended API requests during view loading

encountering a problem integrating react-dropzone into a project using react-16.13.1

What is the best way to invoke a JavaScript function after an event or from a user interface?

Struggling to load Bootstrap Tooltip within the Span Tag that encapsulates the Img tag

Python script utilizing Selenium to load only JavaScript content and excluding full HTML rendering

The passage of time becomes distorted after a few hours of using setInterval

Sequence of promises: The parent promise does not wait for the child promise to be executed before moving on

Encountering a 404 error when utilizing ngx-monaco-editor within an Angular application

What is preventing node from locating the module?

Sending parameters with HTTP GET requests in AngularJS

I'm unable to resolve all parameters for xxx -- unit testing using jest

In a jQuery conditional statement, selecting the second child of the li element for targeting

Updating a Parent component from a Child component in React (Functional Components)

Issue with onClick event not firing when using option tag in React

Bootstrap tab content getting shifted downwards

What is causing my Three.js scene to appear pitch black?