setTimeout can not work properly in Debug JS

[cole-yeah]

func () {
  console.time('begin')
  setTimeout(()=>{
      console.timeEnd('begin')
      console.log('is exactly `10s?')
  }
), 10000}

Environment

OS: macOS react-native: 0.51.0 react: 16.0.0 android: 6.0.1 Node: 8.9.4 npm: 5.7.1

Expected Behavior

about 10s

Actual Behavior

much less than 10s, about 2s

[react-native-bot]

Thanks for posting this! It looks like your issue may be missing some necessary information. Can you run react-native info and edit your issue to include these results under the Environment section?

Thank you for your contributions.

[khomyakov42]

The problem is present when debugging is enabled

Environment: OS: Linux 4.13 Node: 6.11.4 Yarn: 1.2.1 npm: 3.10.10 Watchman: 4.9.0 Xcode: N/A Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed) react: 16.2.0 => 16.2.0 react-native: 0.52.0 => 0.52.0

package.json

{
  "name": "SlideUp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "jest-expo": "25.0.0",
    "react-native-scripts": "1.11.1",
    "react-test-renderer": "16.2.0"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "expo": "^25.0.0",
    "prop-types": "^15.6.1",
    "react": "16.2.0",
    "react-native": "0.52.0"
  }
}

Code:

export class Timeout extends React.Component {
    state = {
        value: 0
    };

    handlePress = () => {
        requestAnimationFrame(() => {
            const start = Date.now();
            setTimeout(() => {
                const value = Date.now() - start;
                this.setState({value: value});
            }, 1000);
        })
    };

    render() {
        return (
            <View style={{position: 'absolute', top: 0, bottom: 0, width: '100%'}}>
                <TouchableOpacity onPress={this.handlePress} style={{position: 'absolute', top: '50%', width: '100%'}}>
                    <View style={{height: 50, backgroundColor: 'red', width: '100%'}}>
                        <Text>{`${this.state.value}ms`}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}

[sharkrice]

same problem

react-native remote debug mode, setTimeout will exexcute immidiately.

try in version 0.49.1 0.51.0 0.55.3,both

code

test = () => {
    setTimeout(() => {
      const message = 'TimeOut'
      console.warn(message + ':' + Date.now())
    }, 10000)
    const timeOut = () => {
      return new Promise((resolve, reject) => {
        console.warn(Date.now())
        setTimeout(() => {
          console.warn(Date.now())
          const message = 'TimeOut'
          reject(message)
        }, 10000)
      })
    }
    try {
      timeOut()
    } catch (error) {
      console.warn(error)
    }
  }

result

1524904514860   
1524904514899   
TimeOut:1524904514900   
Possible Unhandled Promise Rejection (id: 2):"TimeOut"  

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release?

Thank you for your contributions.