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

实例教学

开发需求：某页面要求每 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 对象方法

方法	描述
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

定义和用法

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

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

提示： 1000 毫秒= 1 秒。

语法

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

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

clearInterval(id_of_setinterval)   // id_of_setinterval为setInterval() 返回的 ID 值

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

❤如果文章对您有所帮助，就在文章的右上角或者文章的末尾点个赞吧！(づ￣ 3￣)づ

❤如果喜欢怂怂写的文章，就给阿怂点个关注吧！(๑′ᴗ‵๑)づ╭❤～

❤对文章有任何问题欢迎小伙伴们下方留言，阿怂看到一定会极力给予答复。