javascript 使用setInterval模拟计算程序读秒

使用setInterval模拟计算程序进行计时

效果预览

data定义

  return {
      calTime: 0, // 单位秒
      btnLoading: false,
  }
1
2
3
4

使用setTimeout和Promise模拟后台计算程序。

    execCal(){
       return new Promise((resolve) => {
         setTimeout(()=>{
           this.btnLoading = false
           console.log('模拟axios请求执行')
           resolve('计算执行完毕')
         },5400)
       })
    },
1
2
3
4
5
6
7
8
9

点击计算按钮开始计时，异步计算Promise函数返回成功之后结束计时。

    btnClick() {
      // 开始计算按钮Loading
      this.btnLoading = true
      // 清空时间
      this.calTime = 0
      // 开始计时
      let interval = setInterval(()=>{
        this.calTime ++
        console.log('计数器执行')
      },1000)
      this.execCal().then((res) => {
        this.$Message.success(res)
        // 执行成功，结束计时
        clearInterval(interval)
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

html

 <Row>
        <Col span="4" offset="4">
          <p>计算执行中，计算耗时{{calTime}}秒...p>
        Col>
        <Col span="2">
          <Button :loading="btnLoading" @click="btnClick">
            <span v-if="!btnLoading">开始计算span>
            <span v-else>计算中...（{{calTime}}s）span>
          Button>
        Col>
Row>
1
2
3
4
5
6
7
8
9
10
11

---

努力，奋斗