ES6 promises: the art of connecting functions with parameters

Question

ES6 promises: the art of connecting functions with parameters

Looking for a way to chain functions with delays? Here is an example of what I have tried:

Promise.resolve()
.then(setKeyframe('keyframe-0'))
.then(delay(3000))
.then(setKeyframe('keyframe-1'))
.then(delay(3000))
.then(setKeyframe('keyframe-2'))
;

function delay(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms);
  });
}

function setKeyframe (name) {
  var elem = document.getElementsByClassName('animation-container')[0];
  elem.className = 'animation-container ' + name;
}

However, all the functions appear to be executed one after the other without any delay. The delay function does not seem to work as expected in this chaining process. What could be the issue here?

javascript promise ecmascript-6 es6-promise

Answer 1

Answer №1

Your error may be more obvious with a function that has no arguments:

The correct method:

Promise.resolve().then(setFirstKeyframe)

In the above code, the function setFirstKeyframe is passed as an argument to .then, for the promise to execute later.

The incorrect method:

Promise.resolve().then(setFirstKeyframe())

In this case, setFirstKeyframe is executed immediately (!), and its result (a promise) is then passed to then (which is ignored since then expects a function).

For functions with arguments, use an anonymous function:

Promise.resolve().then(function() {
  return setFirstKeyframe('keyframe-0');
})

This is where es6 arrow functions shine:

Promise.resolve().then(() => setFirstKeyframe('keyframe-0'))

Answer 2

Your error may be more obvious with a function that has no arguments:

The correct method:

Promise.resolve().then(setFirstKeyframe)

In the above code, the function setFirstKeyframe is passed as an argument to .then, for the promise to execute later.

The incorrect method:

Promise.resolve().then(setFirstKeyframe())

In this case, setFirstKeyframe is executed immediately (!), and its result (a promise) is then passed to then (which is ignored since then expects a function).

For functions with arguments, use an anonymous function:

Promise.resolve().then(function() {
  return setFirstKeyframe('keyframe-0');
})

This is where es6 arrow functions shine:

Promise.resolve().then(() => setFirstKeyframe('keyframe-0'))

Answer 3

Answer №2

.then() takes in a function as input, which has the potential to return a promise

However, in this case, you are supplying a promise directly

// Correct
Promise.resolve().then(() => { return new Promise(); });

// Incorrect
Promise.resolve().then(new Promise());

Answer 4

.then() takes in a function as input, which has the potential to return a promise

However, in this case, you are supplying a promise directly

// Correct
Promise.resolve().then(() => { return new Promise(); });

// Incorrect
Promise.resolve().then(new Promise());

Answer 5

Answer №3

One common mistake is calling functions instead of passing them as handlers.

Promise.resolve('keyframe-0')
.then(setKeyframe)
.then(delay(3000, 'keyframe-1'))
.then(setKeyframe)
.then(delay(3000, 'keyframe-2'))
.then(setKeyframe)
;

function delay(ms, value) {
  return function (val) {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, ms, value !== undefined ? value : val);
    });
  };
}

function setKeyframe(name) {
  var element = document.body;
  element.className = 'animation-container ' + name;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.keyframe-0 { background: red; }
.keyframe-1 { background: green; }
.keyframe-2 { background: blue; }

Answer 6

One common mistake is calling functions instead of passing them as handlers.

Promise.resolve('keyframe-0')
.then(setKeyframe)
.then(delay(3000, 'keyframe-1'))
.then(setKeyframe)
.then(delay(3000, 'keyframe-2'))
.then(setKeyframe)
;

function delay(ms, value) {
  return function (val) {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, ms, value !== undefined ? value : val);
    });
  };
}

function setKeyframe(name) {
  var element = document.body;
  element.className = 'animation-container ' + name;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.keyframe-0 { background: red; }
.keyframe-1 { background: green; }
.keyframe-2 { background: blue; }

ES6 promises: the art of connecting functions with parameters

Answer №1

Answer №2

Answer №3

Similar questions

The hyperlink in the HTML code is malfunctioning

Navigate to a fresh HTML page upon form submission

transmit data via Javascript to interact with a Python web application

Attempting to manipulate information within the @click event handler embedded within a v-for loop

Is there a way to create a customized calendar in Node.js?

Counting Slides in a Slick Carousel

Using jQuery to loop through a table and retrieve the button value from every row

How can I identify the appropriate default option element in AngularJS?

Creating a responsive design for mobile apps in Ionic using CSS

deployJava.js injects a new <embed> element into the header section of the webpage

Is it possible to achieve a height transition using CSS instead of relying on JavaScript

A CSS rule to display a nested list on the left-hand side

What method would you recommend for modifying HTML text that has already been loaded using JSP?

Utilizing Angularjs for dynamic data binding in HTML attributes and style declarations

Do arrays permanently retain the strings stored within them?

Tips for Preserving the HTML Page State After Making jQuery Changes

`How can I retrieve a PHP variable using a JavaScript AJAX request?`

Nested pages are causing jQuery plugins to malfunction

Is there a way to automatically display the detailsPanel in Material-table upon loading?

Swapping out a class or method throughout an entire TypeScript project