Example of using setInterval function in React

Example of using setInterval function in React

This article is based on the Windows 10 system environment, learning and using React: Windows 10


1. setInterval function

(1) Definition

The setInterval() method calls a function or evaluates an expression at a specified period (in milliseconds).
The setInterval() method will call the function repeatedly until clearInterval() is called or the window is closed. The ID value returned by setInterval() can be used as a parameter to the clearInterval() method.

(2) Examples

import React, { Component } from 'react';
import { Radio, Button, Icon } from 'antd';

class List extends Component {
  constructor(props) {
    super(props);
    this.state = {
      online: false,
    };
  };

  handleLogin=()=>{
    localStorage.setItem('username','xuzheng');
  };

  handleLogout=()=>{
    localStorage.removeItem('username');
  };

  componentDidMount(){
    this.timer = setInterval(() => {
      this.setState({
        online: localStorage.username ? true : false,
      })
    }, 1000);
  }

  componentWillUnmount() {
    if (this.timer != null) {
      clearInterval(this.timer);
    }
  }

  render() {
    return (
      <div>
        <div>
          <Icon type='user' style={{marginRight:'8px'}}/>
          <span>{localStorage.username ? localStorage.username : 'Not logged in'}</span>
        </div>
        <div style={{marginTop:'20px'}}>
          <Button type='primary' onClick={this.handleLogin}>Login</Button>
        </div>
        <div style={{marginTop:'20px'}}>
          <Button type='primary' onClick={this.handleLogout}>Logout</Button>
        </div>
      </div>
    )
  }
}

export default List;

This is the end of this article about the use of setInterval function in React. For more information about the use of setInterval function in React, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • React error boundary component processing
  • Detailed explanation of react setState
  • Tips for writing concise React components
  • React implements the sample code of Radio component
  • Andrew Ng's machine learning exercise: SVM support vector machine

<<:  How to install MySQL using yum on Centos7 and achieve remote connection

>>:  Tutorial on using iostat command in Linux

Recommend

Detailed explanation of CocosCreator message distribution mechanism

Overview This article begins to introduce content...

Complete step-by-step record of MySQL 8.0.26 installation and uninstallation

Table of contents Preface 1. Installation 1. Down...

JS deep and shallow copy details

Table of contents 1. What does shallow copy mean?...

Introduction to the steps of deploying redis in docker container

Table of contents 1 redis configuration file 2 Do...

Correct use of Vue function anti-shake and throttling

Preface 1. Debounce: After a high-frequency event...

MySQL 8.0.24 installation and configuration method graphic tutorial

This article shares the installation tutorial of ...

Javascript to achieve the effect of closing advertisements

Here is a case study on how to close ads using Ja...

How to set npm to load packages from multiple package sources at the same time

Table of contents 1. Build local storage 2. Creat...

Centos 7 64-bit desktop version installation graphic tutorial

If you think the system is slow and want to chang...

MySql8 WITH RECURSIVE recursive query parent-child collection method

background When developing a feature similar to c...

Implementation of CSS sticky footer classic layout

What is a sticky footer layout? Our common web pa...

wget downloads the entire website (whole subdirectory) or a specific directory

Use wget command to download the entire subdirect...

Methods and steps for deploying go projects based on Docker images

Dependence on knowledge Go cross-compilation basi...