setTimeout doesn't execute

Question

I am using react native for making an App. I need to wait for ten seconds and then do the redirection in my screen. Here is my code:

onPressEnter() {

      setTimeout(onPressEnter(), 5000);

      //////Redirecting
        changePage("Error");
    }

However, either the commands of timeouts that I found shows no, or they gives me an error:

Can not find onPressEnter

I should mention that, this method calls by a button in my screen.

Can you help me how to implement a time out correctly?

Don't invoke the function in the timer. Just reference it. Use `setTimeout(onPressEnter, 5000);` — Scott Marcus, Nov 10 '17 at 14:41
The code doesn't make much sense; the setTimeout call is inside the same function the timer is supposed to trigger. You need to set the timer outside the function (and remove the brackets). Also, 5000 milliseconds is not 10 seconds. — JJJ, Nov 10 '17 at 14:42
@ScottMarcus: Thanks for your answer, it gave me the same error. :( — Queen, Nov 10 '17 at 14:42
@JJJ It is very common to put a `setTimeout` inside the function that it calls. It makes the function recursive with a delay. It avoids the pitfalls of `setInterval`. — Scott Marcus, Nov 10 '17 at 14:44
@Queen You may still have a problem, but my comment still applies. You are not invoking your timer properly. — Scott Marcus, Nov 10 '17 at 14:44
@ScottMarcus Yes, but that doesn't seem to apply here: it doesn't make sense to redirect in a loop. Also, you have to call the function once to start the loop – that code is missing here. — JJJ, Nov 10 '17 at 14:45

Chris · Accepted Answer · 2017-11-10T14:58:16.140

The following example might help. When the onPressEnter() function is executed it is first checked if there is already a timer running from a previous execution. If so, do nothing. Else, set a timeout of 10 seconds and then run a function which invokes your changePage() function.

class MyComponent extends React.Component {

  onPressEnter = () => {
    if(this.timer > 0) return;
    this.timer = setTimeout(() => {
      this.changePage("Error");
      this.timer = null;  //not necessary if you are unmounting the component
    }, 10000);
  }

  changePage = (page) => {
    console.log("redirecting to " + page);
  }

  render() {
    return <button onClick={this.onPressEnter}>Redirect</button>
  }
}

ReactDOM.render(<MyComponent />, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

This is what I was looking for! It works! Thanks a lot. I don't know why I gave -2 on this question but, it worth to get this answer. Thanks a lot. :) — Queen, Nov 10 '17 at 15:04
@Queen, no problem. I am guessing it got downvoted because certain parts of your code/question was not included in your post, thus making it harder to understand your problem. Anyway, glad I could help. Good luck! — Chris, Nov 10 '17 at 15:05

score 1 · Answer 2 · answered Nov 10 '17 at 14:56

Your code should work if you add function to your function declaration and remove the brackets from the setTimeout function:

function onPressEnter() {
    setTimeout(onPressEnter, 5000);
    console.log('enter pressed');
}

onPressEnter();  // start the timeout loop going

score -1 · Answer 3 · edited Nov 10 '17 at 15:04

-1

Try adding it inside in an anonymous function.

onPressEnter() {
  setTimeout(function() {
    onPressEnter()
  }, 5000); 
  //////Redirecting
  changePage("Error");
}

edited Nov 10 '17 at 15:04

Chris

57,622
19
111
137

answered Nov 10 '17 at 14:47

krishna sapkal

1
1

setTimeout doesn't execute

3 Answers3