Benoit Rospars

Some time ago, I was working on a app that generates json config files for online courses. It was working great and the building process was fast. Too fast.
It wasn’t providing any visual feedback to the end user and no way of understanding what’s going on. Here’s a great article on the subject.

So I looked for a way of slowing things down and provide a step by step animation when generating thoses files. I thought it will be a straightforward process using setTimeout but I was wrong.

My building script use different functions with parameters for each step and I couldn’t simply add a setTimeout to each call and passing arguments.

Here’s a basic script that illustrate the problem :

// Each function take the results from previous steps, do some logic and pass it to the next one

function step1(foo) {
  // some logic and pass result to next step
  var bar = foo * 2
  step2(foo, bar)
}

function step2(foo, bar) {
  // some logic and pass result to next step
  var foobar = (foo + bar) * 2
  step3( foo, bar, foobar)
}

function step3(foo, bar, foobar) {
  console.log(foo + bar + foobar)
}

step1(2) // logs '18' immediately

So the solution is to rely on a callback and ...args parameter to pass an undeterminated number of arguments to the the callback. That way you can create a function that takes the next step function as a callback and arguments to pass on after a certain delay. And at each step you can update your view to provide an animation feedback to the user.

function nextStep(cb, ...args) {
	setTimeout(() => {
  	cb(...args)
  }, 1000)
}

function step1(foo){
  // some logic and pass result to next step
  var bar = foo * 2
	nextStep(step2, foo, bar)
}

function step2(foo, bar){
  // some logic and pass result to next step
  var foobar = (foo + bar) * 2
  nextStep(step3, foo, bar, foobar)
}

function step3(foo, bar, foobar){
  // some logic and pass result to next step
 console.log(foo + bar + foobar)
}

step1(2) // logs '18' after some time

See this working example :