JavaScript, create a loop that waits for a change in value

Question

JavaScript, create a loop that waits for a change in value

I've been attempting to ensure that an API is fully loaded before proceeding, but the test code below doesn't seem to be properly implementing the timeout delay. As a result, it seems to be running through the loop too quickly.

var google = false;
  function test(check = false) {
    if (!check) {
      console.log('appending the api');

      check = true;
    }
    if (check) {
      console.log('checking if api is loaded');
      if(!google){
        console.log('api not yet loaded');
        setTimeout(test(true), 10000);
        return;
      } else {
        console.log('api loaded successfully');
      }
    }
  }

This code should continue to display the two console.log messages until the google variable is set to true.

However, I'm faced with a dilemma as the browser becomes unresponsive due to an excessive number of loops being generated.

javascript

Answer 1

Answer №1

The issue lies within this particular line:

setTimeout(test(true), 10000);

To resolve this, you need to pass the function without executing it. If you need to include parameters, follow this format:

setTimeout(function(){test(true)}, 10000);

Answer 2

The issue lies within this particular line:

setTimeout(test(true), 10000);

To resolve this, you need to pass the function without executing it. If you need to include parameters, follow this format:

setTimeout(function(){test(true)}, 10000);

Answer 3

Answer №2

When using the setTimeout function, it is important to pass in a reference to the function rather than invoking it immediately. For example, use setTimeout(test, 1000, true) instead of setTimeout(test(true), 1000). This way, you are passing the function itself along with any parameters it requires.

According to information from MDN WindowOrWorkerGlobalScope.setTimeout(), the three arguments that should be passed to setTimeout are: the function, the timeout value, and any parameters needed for the function to execute properly. JavaScript functions are considered first class objects, allowing them to be passed around as regular objects. In the incorrect example provided, the function was immediately invoked, passing its return value to setTimeout instead of passing the function itself.

Answer 4

When using the setTimeout function, it is important to pass in a reference to the function rather than invoking it immediately. For example, use setTimeout(test, 1000, true) instead of setTimeout(test(true), 1000). This way, you are passing the function itself along with any parameters it requires.

According to information from MDN WindowOrWorkerGlobalScope.setTimeout(), the three arguments that should be passed to setTimeout are: the function, the timeout value, and any parameters needed for the function to execute properly. JavaScript functions are considered first class objects, allowing them to be passed around as regular objects. In the incorrect example provided, the function was immediately invoked, passing its return value to setTimeout instead of passing the function itself.

Answer 5

Answer №3

By setting the timeout for the value returned by the test function, you are actually recursively invoking the test function immediately.

To avoid this, you should place test(true) in an anonymous function like this:

var google = false;
function test(check = false) {
  if (!check) {
    console.log('append the api');
    check = true;
  }
  if (check) {
    console.log('check api is loaded');
    if(!google){
      console.log('not loaded');
      setTimeout(() => test(true), 10000);
      return;
    } else {
      console.log('loaded');
    }
  }
}

Alternatively, you can achieve the same result without using arrow functions like this:

var google = false;
function test(check = false) {
  if (!check) {
    console.log('append the api');
    check = true;
  }
  if (check) {
    console.log('check api is loaded');
    if(!google){
      console.log('not loaded');
      setTimeout(function () {
        test(true);
      }, 10000);
      return;
    } else {
      console.log('loaded');
    }
  }
}

Answer 6

By setting the timeout for the value returned by the test function, you are actually recursively invoking the test function immediately.

To avoid this, you should place test(true) in an anonymous function like this:

var google = false;
function test(check = false) {
  if (!check) {
    console.log('append the api');
    check = true;
  }
  if (check) {
    console.log('check api is loaded');
    if(!google){
      console.log('not loaded');
      setTimeout(() => test(true), 10000);
      return;
    } else {
      console.log('loaded');
    }
  }
}

Alternatively, you can achieve the same result without using arrow functions like this:

var google = false;
function test(check = false) {
  if (!check) {
    console.log('append the api');
    check = true;
  }
  if (check) {
    console.log('check api is loaded');
    if(!google){
      console.log('not loaded');
      setTimeout(function () {
        test(true);
      }, 10000);
      return;
    } else {
      console.log('loaded');
    }
  }
}

JavaScript, create a loop that waits for a change in value

Answer №1

Answer №2

Answer №3

Similar questions

The animation in threejs using lerp and camera transitions lacks fluidity

Logs from console.log() statements in Firebase functions are missing

The property 'top' of undefined jQuery cannot be read

When using the mui joy library, obtaining the input value upon submission may result in the retrieval of an "unidentified" response

Is there a way to implement tab functionality in jQuery UI through an onclick event?

Generating a bullet list from an array of objects

Encountering an issue with inability to resolve the 'react-navigation-stack' module. Still seeking a solution to this problem

Arrange arrays with multiple dimensions in JavaScript based on their ranges

Create a function that can dynamically filter an array of objects and extract specific properties into a new array

What is the best way to create three distinct fractions in JavaScript that cannot be simplified?

The Bootstrap carousel spiraled into disarray

Analyzing conditional statements in React with State management

How can one effectively restrict the number of tags allowed in a WYSIWYG editor?

What is the reason behind the requirement in Javascript (ES.next) that a function must be declared as async in order to utilize await functionality?

What is the best method to delete a value from localStorage using redux-persist?

What is the process of invoking a function from a different component in Vue 3?

Invoker of middleware and stack functions for Express.js with a focus on capturing the response object

Calculate the total of a checkbox and hidden field combination using JavaScript

Node.js Sparse Array Memory Usage Explained

Is there a way to modify this JavaScript code so that it can function with a