使用React做一个简单的倒计时按钮

JavaScript定时器有以下两种方法：

  • setinterval()：按照指定的周期（毫秒级）来调用函数或表达式，方法会不停的调用函数，知道clearinterval()被调用或窗口被关闭
  • setTimeout()：在指定的毫秒数后调用函数或计算表达式。

setInterval()

语法

setInterval(code,millisec,lang) 

参数描述
code必需。要调用的函数或要执行的代码串。
millisec必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
lang可选。 JScript | VBScript | JavaScript

setTimeout()

语法

setTimeout(code,millisec,lang)  

参数描述
code必需。要调用的函数后要执行的 JavaScript 代码串。
millisec必需。在执行代码前需等待的毫秒数。
lang可选。脚本语言可以是：JScript | VBScript | JavaScript

下面是使用React写的一个简单的倒计时的功能
App.js

import React, { Component } from 'react'
export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      dump:false,
      count:10 
    }
    this.recall = this.recall.bind(this)
  }
  recall () {
    let count  = this.state.count
    let timer = setInterval(() => {
      this.setState({ count: (count -- ), dump: true}, () => {
        if(count === 0) {
          clearInterval(timer);
          this.setState({
            dump:false,
            count:10
          })
        }
      });
    },1000);
  }
  render() {
    return (
      <div>
        <button onClick={this.recall}><span>{this.state.count + 's'}</span></button>
      </div>
    )
  }
}
Last modification：June 28th, 2019 at 01:27 pm
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏