How to simplify setTimeout in ReactJS

Question

There was a typewriting animation in pure javaScript which has been converted to ReactJS. The setTimeout functions do not look clean and do not adhere to best practices according to ReactJS standard.

For example animationManager()

animationManager = () => {
  this.rafRef = requestAnimationFrame(time => {
    const typingData = this.props.data;
    this.typeEffect(time, typingData[this.index], () => {
      this.timeoutRef = setTimeout(() => {
        this.rafRef = requestAnimationFrame(time => {
          this.deleteEffect(time, () => {
            this.timeoutRef = setTimeout(() => {
              this.index =
                this.index === typingData.length - 1 ? 0 : this.index + 1;
              this.animationManager();
            }, this.props.pauseBeforeRestarting);
          });
        });
      }, this.props.pauseBeforeDeleting);
    });
  });
};

Is it possible to make it more clean with all these setTimout ?

Complete code 👉 https://codesandbox.io/s/qk4591q1kw

I'm voting to close this question as off-topic because the code is working as is. The question belongs on codereview.stackexchange.com — Yury Tarabanko
– Yury Tarabanko, Commented Jan 18, 2019 at 9:33
This is a lot less to do with setTimeout than simply refactoring, I would wrap each callback into a promise and call them via await — Jonny Lin
– Jonny Lin, Commented Jan 18, 2019 at 9:35
@YuryTarabanko I am sorry to see your close vote. Unfortunately there no even views in codereview page codereview.stackexchange.com/questions/211710/… — Mo.
– Mo., Commented Jan 18, 2019 at 9:35

Terry · Accepted Answer · 2019-01-18 09:53:29Z

1

Yes, you can actually create functions that acts like a timer: it returns a promise that is resolved when the time runs out, something like this:

timer = (duration) => {
  return new Promise(resolve => {
    window.setTimeout(resolve, duration);
  });
}

Similarly, you can do the same for requestAnimationFrame. The trick is to use ES6 spread operator so that you can pass arbitrary number of arguments into the callback to be invoked:

animationFrame = (callback, ...args) => {
  return new Promise(resolve => {
    window.requestAnimationFrame(time => {
      callback(time, ...args);
    });
  })
}

Since you are using ES6, you can then use async functions to wait for the timer to complete, before moving on to execute the next line of code. If we break down your animationManager() code, it can be seen as following:

You want to start with typingEffect
Once typingEffect is completed, you want to trigger deleteEffect

In this case, we can refactor your code as such:

animationManager = () => {
  const deleteFunc = (time, typingData) => {
    this.deleteEffect(time, async () => {
      await this.timer(this.props.pauseBeforeRestarting);
      this.index = this.index === typingData.length - 1 ? 0 : this.index + 1;
      this.animationManager();
    });
  };

  const typeFunc = (time) => {
    const typingData = this.props.data;
    this.typeEffect(time, typingData[this.index], async () => {
      await this.timer(this.props.pauseBeforeDeleting);
      await this.animationFrame(deleteFunc, typingData);
    })
  };

  this.animationFrame(typeFunc);
};

I have forked your example to provide a proof-of-concept of the slightly refactored code: https://codesandbox.io/s/308kxjzwrq

answered Jan 18, 2019 at 9:53

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mo. Over a year ago

Thank you very much for your help buddy. FYI codesandbox.io/s/308kxjzwrq still same as the original code

Terry Over a year ago

@Mo. My bad, looks like I forgot to hit save :) fixed now!

Mo. Over a year ago

got it, looks awesome 👌

Dima Vishnyakov · Accepted Answer · 2019-01-18 09:34:28Z

0

The common practice is to use Promises for that. You can create helper Promise which will use requestAnimationFrame, and make your flow flat and "thenable", by adding success callbacks onResolve.

answered Jan 18, 2019 at 9:34

Dima Vishnyakov

1,56011 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to simplify setTimeout in ReactJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related