How to use settimeout method in react?

Question

I want to know how to use setTimeout() method. Basically, I want to click on the element after some seconds and after that perform something.

So My code is as below,

class SomeComponent extends React.PureComponent {
    on_first_render = () => {
        this.somemethod_called();
        setTimeout(() => {
            this.props.handle_click(52, 16);
        },0);
        setTimeout(() => {
            this.props.handle_click(522, 352);
         }, 0)

         setTimeout(() => {
             const input = document.querySelector('input[type=text] 
                           [name=somename]');
             input && input.blur();
         }, 700);

As seen from above code, same handle_click() method is called in two setTimeout() methods and after 7 seconds I search for input element in the document and remove focus from it.

I feel this is clumsy and not right approach... Could someone let me know how to do it in another way which is not repeated like this.

Thanks.

What are you really trying to do? You shouldn't mix document.querySelector() with React in general; why not do whatever handle_click() does directly? Also, {52, 16} is not valid Javascript... — AKX
– AKX, Commented Nov 5, 2019 at 8:20
i have used queryselector instead of state since i didnt want to use state passed from other component and modify the core code for the less used component....also this is done in one statement and can be removed easily later. i have edited my question to fix typos. this input element appears in a dialog after click has been done so i use settimeout to wait until that element appears and perform blur. and handle click is used in set timeout because first time it clicks a point and called second time it creates a line at the given coordinates. — someuser2491
– someuser2491, Commented Nov 5, 2019 at 8:27

AKX · Accepted Answer · 2019-11-05 08:36:09Z

3

As things are, your setTimeouts aren't waiting for anything; you're queuing three timeouts that will resolve after 0, 0, and 700 msecs respectively.

Although I'm not quite sure what you're after in the end, or if you're doing things in a very idiomatic React way, I'd suggest using async/await and a "delay" helper function:

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

const onFirstRender = async () => {
  this.somemethod_called();
  await delay(100);
  this.props.handle_click(52, 16);
  await delay(100);
  this.props.handle_click(522, 352);
  await delay(700);
  const input = document.querySelector("input[type=text][name=somename]");
  if (input) {
    input.blur();
  }
};

answered Nov 5, 2019 at 8:36

AKX

171k16 gold badges147 silver badges229 bronze badges

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

Comments

Mohammad Manzoor Alam · Accepted Answer · 2019-11-05 08:41:14Z

0

Rather than using setTimeOut, you can use debounce to make delay in any operation.

var SearchBox = React.createClass({
  componentWillMount: function () {
     this.delayedCallback = _.debounce(function (event) {
       // "event.target" is accessible now
     }, 1000);
  },

  onChange: function (event) {
    event.persist();
    this.delayedCallback(event);
  },

  render: function () {
    return (
      <input type="search" onChange={this.onChange} />
    );
  }

});

for more detail go through this module https://www.npmjs.com/package/react-debounce-input

answered Nov 5, 2019 at 8:41

Mohammad Manzoor Alam

1013 bronze badges

1 Comment

AKX Over a year ago

That's not really what OP is asking for, if I understand things correctly...

Collectives™ on Stack Overflow

How to use settimeout method in react?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related