vue2中如何在一个点击事件里每隔几秒调用一次接口数据完整代码

在Vue2中，可以在点击事件中使用`setInterval()`函数来实现每隔一段时间调用接口获取数据的功能。

以下是一个示例代码：

<template>
  <div>
    <button @click="startGetData">开始获取数据</button>
    <button @click="stopGetData">停止获取数据</button>
    <!-- 显示接口数据 -->
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      data: [], // 存储接口数据
      timer: null, // 定时器
    }
  },
  methods: {
    startGetData() {
      // 每隔5秒调用一次接口
      this.timer = setInterval(() => {
        this.getData()
      }, 5000)
    },
    stopGetData() {
      // 停止定时器
      clearInterval(this.timer)
    },
    getData() {
      axios.get('your-api-url').then(response => {
        this.data = response.data
      })
    },
  },
}
</script>

在上述代码中，我们在`startGetData()`方法中使用`setInterval()`函数每隔5秒调用一次`getData()`方法来获取接口数据，并将数据存储在`data`属性中。在`stopGetData()`方法中停止定时器，防止重复调用。

在模板中，我们使用两个按钮来控制定时器的启动和停止，并使用`v-for`指令遍历显示数据。

注意：当用户点击开始获取数据按钮后，如果用户再次点击该按钮，则会重复开启定时器，导致数据重复获取。这时我们可以在`startGetData()`方法中添加一个判断，如果定时器已经存在，则不再开启。