20190225 vue的定时任务信息整理

最新推荐文章于 2024-09-06 16:10:32 发布

邵婧萱（金生水起万缘和合）

最新推荐文章于 2024-09-06 16:10:32 发布

阅读量1.4k

点赞数

分类专栏： vue定时任务文章标签： vue定时任务

本文链接：https://blog.csdn.net/weixin_36810906/article/details/87915748

版权

本文详细介绍了Vue中如何使用定时器setInterval和setTimeout，包括实例、问题及解决办法，并强调了在组件销毁时清除定时器以避免内存消耗的重要性。

摘要由CSDN通过智能技术生成

1.Vue定时任务setInterval

使用时，只需要加上 setInterval 即可，如下：

mounted() {
this.getElevatorList();
setInterval(this.getElevatorList, 15000);

}

在mounted（）函数里边使用setInterval(), getElevatorList()这个方法在methods里边写，在mounted钩子函数里边调用就可以，刚开始先调用一遍，加载。然后使用setInterval(),第一个参数，调用方法的时候，不加括号，第二个参数是时间。

2.实例：

<template lang="html">
  <div v-loading="isLoading">
    <div class="div-a">
      <el-row>
        <el-col :span="12" v-for="(item, index) in dataList" :key="index">
          <div class="image" :style="'height:' + itemBlockHeight + 'px'">
            <div class="item-tag">
              <span><b>创建时间：</b>{
 {item.createTime | TimeFormat}}</span>
              <span><b>上传用户：</b>{
 {item.userName}}</span>
            </div>
            <div class="video-container" v-if="item.type == 2">
              <video controls="controls" autoplay="autoplay" muted>
                <source :src="item.fileUrl" type="video/ogg">
                <source :src="item.fileUrl" type="video/mp4">
                Your browser does not support the video tag.
              </video>
            </div>
            <div class="image-container" v-else>
              <img :src="item.fileUrl" @click="handleImagePreview(item.imgMap.colour)">
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="alert-container" v-if="showAlertContainer">
        <el-button v-if="contentType == 'history' " size="small" class="history-btn" type="warning" @click="handleSwitch('current')">当前报警</el-button>
        <el-button v-else size="small" class="history-btn" type="warning" @click="handleSwitch('history')">历史报警</el-button>
        <el-button :loading="isClosing" size="small" class="history-btn second" type="danger" @click="handleCloseAlert()">关闭当前报警</el-button>
        <img class="close-btn" src="../../../assets/close.png" @click="closeAlertModal()" />
        <div class="alert-content" v-if="contentType == 'current' ">
          <div class="mobile">
            <div class="item-tag">
              <span><b>区域：</b>{
 {WarningCondition.areaInfoName}}</span>
              <span><b>报警信息名称：</b>{
 {WarningCondition.name}}</span>
              <span><b>报警时间：</b>{
 {WarningCondition.createTime | TimeFormat}}</span>
              <span>
                <b>报警触发条件：</b> {
 {WarningCondition.type==1?'人员':'车辆'}} 大于 {
 { WarningCondition.threshold }}
              </span>
            </div>
            <div class="video-container" v-if="alertInfo.type == 2">
              <video controls="controls" autoplay="autoplay" muted>
                <source :src="alertInfo.fileUrl" type="video/ogg">
                <source :src="alertInfo.fileUrl" type="video/mp4">
                Your browser does not support the video tag.
              </video>
            </div>
            <div class="image-container" v-else>
              <img :src="alertInfo.fileUrl">
            </div>
          </div>
        </div>
        <div class="alert-content" v-else>
          <el-row style="padding: 30px 0;">
            <el-col :span="20" :offset="2">
              <el-table
                :data="alertHistoryData"
                border
                v-loading.body=