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

React Fragment Introduction and Detailed Usage

Table of contents Preface Motivation for Fragment...

Vue+swiper realizes timeline effect

This article shares the specific code of vue+swip...

Vue realizes dynamic progress bar effect

This article example shares the specific code of ...

Implementation of HTML command line interface

HTML Part Copy code The code is as follows: <!D...

JavaScript implements H5 gold coin function (example code)

Today I made a Spring Festival gold coin red enve...

Example of how to configure nginx to implement SSL

Environmental Description Server system: Ubuntu 1...

Specific use of stacking context in CSS

Preface Under the influence of some CSS interacti...

How to handle spaces in CSS

1. Space rules Whitespace within HTML code is usu...

What are the differences between var let const in JavaScript

Table of contents 1. Repeated declaration 1.1 var...

Six-step example code for JDBC connection (connecting to MySQL)

Six steps of JDBC: 1. Register the driver 2. Get ...

Linux system repair mode (single user mode)

Table of contents Preface 1. Common bug fixes in ...

Using Vue3 (Part 1) Creating a Vue CLI Project

Table of contents 1. Official Documentation 2. Cr...

JavaScript to implement the function of changing avatar

This article shares the specific code of JavaScri...

Several scenarios for using the Nginx Rewrite module

Application scenario 1: Domain name-based redirec...