Vue定时执行点击事件

效果图

效果图

简述

需求：
1.点击发送在输入框中的信息追加到上条信息后
2.定时执行

setTimeout和setInterval的区别

• setInterval 循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉;
  setInterval（“方法名或方法”，“延时”）
• setTimeout：定时执行setTimeout是设置一个时间，等待时间到达的时候只执行一次，但是执行完以后定时器还在，只是没有运行;
  setTimeout(“方法名或方法”, “延时”);

使用setTimeout隔一秒后执行点击事件或setInterval每隔五秒执行一次

<template>
 <div class="test1">
      <h3 align="center">Test1—— 超时自动回复测试</h3>
      <h5 style="border:1px solid #3A8EE6;width: 250px;margin-left: 30px;" v-for="(item, index) in arr" :key="index">
        {{item.title}}
      </h5>
      <el-input style="width: 310px;" v-model="title" type="text"> </el-input>
      <el-button type="primary" @click="info">发送</el-button>
    </div>
</template>
 export default {
    name: "test",
    data: function() {
      return {
        value: 0,
        arr: [{  title: 'test' }],
        title: '您好，欢迎咨询有问必应的test客服人员，有什么可以帮到您？',
      }
    },
    methods: {
      info() {
        this.value++;
        console.log(this.value);
        console.log(this.title)
        // console.info(this.$refs.title.value)
        this.arr.push({
          title: this.title
        })
      },
    },
    created() {
    },
    mounted() {
      this.timer = setTimeout(this.info, 1000); //定时执行setTimeout是设置一个时间，等待时间到达的时候只执行一次，但是执行完以后定时器还在，只是没有运行
      // this.timer = setInterval(this.info, 5000); //循环执行就是设置一个时间间隔，每过一段时间都会执行一次这个方法,直到这个定时器被销毁掉
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    }
  }

<style lang="less" scoped>
    .test1 {
      text-align: left;
      width: 400px;
      border: 1px solid #000000;
    }
</style>