setInterval()与setTimeout()计时器

最新推荐文章于 2025-05-29 23:26:41 发布

原创最新推荐文章于 2025-05-29 23:26:41 发布 · 519 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用HTML和JavaScript实现页面自动刷新的方法，并展示了如何设置不同的刷新间隔及显示刷新进度条。通过切换开关控制刷新功能的开启与关闭，用户可根据需求选择10秒至1小时的不同刷新频率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面中选择间隔时间自动刷新,并显示刷新进度条:

HTML:

 <poptip word-wrap title="刷新間隔設置" placement="left-start" width="80">
                            <h4>自動刷新:</h4>
                            <div class="refresh_config" slot="content">

                                <radio-group v-model="timeValue" @on-change="current_selected" vertical>
                                    <radio label="10S"></radio>
                                    <radio label="20S"></radio>
                                    <radio label="30S"></radio>
                                    <radio label="1min"></radio>
                                    <radio label="5min"></radio>
                                    <radio label="10min"></radio>
                                    <radio label="30min"></radio>
                                    <radio label="1hour"></radio>
                                </radio-group>
                            </div>
                        </poptip>
                        <i-switch size="large" v-model="switch1" @on-change="change_switch">
                            <span slot="open">开启</span>
                            <span slot="close">关闭</span>
                        </i-switch>
                    </div>
                    <!-- <i-input class="search" v-model="input_data3" id="yk" placeholder="請輸入要查找的關鍵詞" icon="ios-search-strong"
                        @on-enter="search" @on-click="search" @on-change="inputChanged"></i-input> -->
                    <i-progress :percent="percent" class="progress" status="active" :stroke-width="1" :hide-info="true"></i-progress>

JS:

 // 更新進度
        updateProgress: function() {
          // 初始化后加载进度  step=2,
          let step = this.step;
          this.timer = setInterval(() => {
            this.percent = this.percent + step;
            // 加载完前进度条最多到stopVal的这个百分值
            if (this.percent >= this.stopVal) {
              this.percent = 0;
              this.aaa();
              // clearInterval(this.timer)
            }
          }, this.timeUpdate / 100);
        },

计时器开关状态

 // switch 狀態
        change_switch: function(val) {
          if (val == false) {
            window.clearInterval(this.a6);
            this.percent = 0;
            window.clearInterval(this.timer);
          } else {
            this.transform_time(val);
            this.updateProgress();
          }
        },

当前选择刷新间隔

 // 當前選擇改變
        current_selected: function(val) {
          window.clearInterval(this.a6);
          this.transform_time(val);
          this.percent = 0;
          window.clearInterval(this.timer);
          this.updateProgress();
        },

刷新

 aaa: function() {
          console.log(11111);
          let k = this;
          this.download(
            k.building,
            k.floor,
            k.type,
            k.section,
            k.lines,
            k.current_num,
            k.pageSize,
            function(data) {
              k.data1 = data.detail;
            }
          );
        },

运行演示: