vue 定时 (自定义时间) 调用接口【详解】

川长思鸟来 2023-06-25 08:15 29阅读 0赞

### 实例教学 ###

开发需求：某页面要求每 3000 毫秒执行调用一次接口，且只能处于该页面或者该窗口界面定时才生效，离开该界面或者窗口，立马停止定时效果，说白了，就是打开该页面定时就启动，离开该页面，定时关闭；

代码实现：

data() {
          return {
            timer : null,//用来接收setInterval()返回的 ID 值
        }
    })
    
    //定时执行initTable方法
    mounted: function () {
        let self = this;
         function freshTable () {
            self.initTable(null,self.pageSize,self.currentPage);
          }
            self.timer = setInterval(freshTable, 3000);//定时间隔，
    },
    
    //摧毁定时接口
    destroyed: function() { 
          clearInterval(this.timer)
          this.timer = null;
    },
    
    methods: {
        initTable: function (e, pageSize, currentPage) {
            pageSize ? this.pagesize = pageSize : null;
            this.api({
              url: "dlcc-api/dataSetExchange/selectChildByIds",
              method: "post",
              data: {
                page: currentPage ? currentPage : 1,
                limit: pageSize ? pageSize : 10,
                id: this.$route.params.id,
              }
            }).then(data => {
              this.tableData.tData = data.data;
            })
        },
    }

### \----------------------------------------------拓展------------------------------------------------ ###

## Window 对象方法 ##

<table> 
 <tbody> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jsref/met-win-clearinterval.html" rel="nofollow">clearInterval()</a></td> 
   <td>取消由 setInterval() 设置的 timeout。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jsref/met-win-cleartimeout.html" rel="nofollow">clearTimeout()</a></td> 
   <td>取消由 setTimeout() 方法设置的 timeout。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jsref/met-win-setinterval.html" rel="nofollow">setInterval()</a></td> 
   <td>按照指定的周期（以毫秒计）来调用函数或计算表达式。</td> 
  </tr> 
  <tr> 
   <td><a href="https://www.w3cschool.cn/jsref/met-win-settimeout.html" rel="nofollow">setTimeout()</a></td> 
   <td>在指定的毫秒数后调用函数或计算表达式。</td> 
  </tr> 
 </tbody> 
</table>

## 定义和用法 ##

clearInterval() 方法可取消由 [setInterval()][setInterval] 设置的 timeout，参数必须是由 setInterval() 返回的 ID 值。

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式，会不停地调用函数，直到 [clearInterval()][clearInterval] 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

**提示：** 1000 毫秒= 1 秒。

## 语法 ##

setInterval(code,millisec,lang)  //返回值为一个int类型

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

clearInterval(*id\_of\_setinterval*)   // *id\_of\_setinterval*为setInterval() 返回的 ID 值

ps:教程用法来源于w3cschool：[https://www.w3cschool.cn/jsref/obj-window.html][https_www.w3cschool.cn_jsref_obj-window.html]

> ❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ
> 
> ❤如果喜欢怂怂写的文章，就给阿怂点个关注吧！(๑′ᴗ‵๑)づ╭❤～
> 
> ❤对文章有任何问题欢迎小伙伴们下方留言，阿怂看到一定会极力给予答复。

[setInterval]: https://www.w3cschool.cn/jsref/met-win-setinterval.html
[clearInterval]: https://www.w3cschool.cn/jsref/met-win-clearinterval.html
[https_www.w3cschool.cn_jsref_obj-window.html]: https://www.w3cschool.cn/jsref/obj-window.html