如何清除 setInterval(() => { this.sendData(loadOP) }, 1000);定时器
时间: 2024-01-10 16:02:08 浏览: 31
可以使用 clearInterval() 方法来清除 setInterval() 定时器。需要将 setInterval() 返回的定时器 ID 作为参数传递给 clearInterval() 方法,即可停止定时器的执行。例如:
```
let timerId = setInterval(() => {
this.sendData(loadOP);
}, 1000);
// 在需要停止定时器的时候调用 clearInterval()
clearInterval(timerId);
```
这样就可以停止定时器的执行。
相关问题
fs的遍历文件夹方式运行的时候打不开,帮我修改一下,不用fs的遍历方式去遍历本地文件夹里的视频<template> <div class="video-container"> <video ref="videoPlayer" @ended="playNextVideo" @click="toggleFullScreen" controls></video> </div> </template> <script> import fs from 'fs'; export default { name: 'FullScreenVideoPlayer', data() { return { currentVideoIndex: 0, // 当前播放的视频索引 videoList: [], // 视频列表 autoplayInterval: null // 自动播放的定时器 } }, computed: { currentVideoSrc() { return this.videoList[this.currentVideoIndex] } }, mounted() { const video = this.$refs.videoPlayer; fs.readdir('./src/video', (err, files) => { if (err) throw err; const videoFiles = files.filter(file => file.endsWith('.mp4')); const videoList = videoFiles.map(file => './src/video' + file); this.videoList = videoList; video.src = this.currentVideoSrc; video.play(); this.autoplayInterval = setInterval(() => { this.playNextVideo() }, 5000); }); video.addEventListener('ended', () => { this.playNextVideo() }); }, beforeUnmounted() { // 清除定时器 clearInterval(this.autoplayInterval) }, methods: { playNextVideo() { const video = this.$refs.videoPlayer; this.currentVideoIndex++; if (this.currentVideoIndex >= this.videoList.length) { this.currentVideoIndex = 0 } video.src = this.currentVideoSrc; video.play() }, toggleFullScreen() { const video = this.$refs.videoPlayer; if (document.fullscreenElement) { document.exitFullscreen() } else { video.requestFullscreen() } } } } </script> <style scoped> .video-container { width: 100%; height: 100%; } video { width: 100%; height: 100%; object-fit: contain; } </style>
可以使用 Node.js 内置的 `fs` 模块的同步方法 `readdirSync` 来遍历本地文件夹,修改后的代码如下:
```
<template>
<div class="video-container">
<video ref="videoPlayer" @ended="playNextVideo" @click="toggleFullScreen" controls></video>
</div>
</template>
<script>
import fs from 'fs';
export default {
name: 'FullScreenVideoPlayer',
data() {
return {
currentVideoIndex: 0, // 当前播放的视频索引
videoList: [], // 视频列表
autoplayInterval: null // 自动播放的定时器
}
},
computed: {
currentVideoSrc() {
return this.videoList[this.currentVideoIndex]
}
},
mounted() {
const video = this.$refs.videoPlayer;
const videoFiles = fs.readdirSync('./src/video');
const videoList = videoFiles.filter(file => file.endsWith('.mp4')).map(file => './src/video/' + file);
this.videoList = videoList;
video.src = this.currentVideoSrc;
video.play();
this.autoplayInterval = setInterval(() => {
this.playNextVideo()
}, 5000);
video.addEventListener('ended', () => {
this.playNextVideo()
});
},
beforeUnmounted() {
// 清除定时器
clearInterval(this.autoplayInterval)
},
methods: {
playNextVideo() {
const video = this.$refs.videoPlayer;
this.currentVideoIndex++;
if (this.currentVideoIndex >= this.videoList.length) {
this.currentVideoIndex = 0
}
video.src = this.currentVideoSrc;
video.play()
},
toggleFullScreen() {
const video = this.$refs.videoPlayer;
if (document.fullscreenElement) {
document.exitFullscreen()
} else {
video.requestFullscreen()
}
}
}
}
</script>
<style scoped>
.video-container {
width: 100%;
height: 100%;
}
video {
width: 100%;
height: 100%;
object-fit: contain;
}
</style>
```
请注意,`readdirSync` 是同步方法,执行过程中会阻塞主线程,因此对于大文件夹或者需要实时响应的场景不太适用。如果要遍历大文件夹或者需要实时响应,可以使用 `readdir` 方法异步遍历,或者使用第三方的文件遍历库。
mounted() { this.grilData(); this.manData(); setInterval(() => { this.grilData(); // 每5秒获取一次数据 this.manData(); }, 500000); },async grilData(){ try{ // const gender = '0'; const roomnumber = '03'; // const urls = getCtUrl(); // const CTDatas= await fetchLine(urls,roomnumber,gender); const response = await axios.get('/line.json'); //女生数据 const CTDatas = response.data; console.log("CTDatas",CTDatas); //让获得的数据按顺序来排 this.matchedData = CTDatas.data.list.filter(data => data.States !== "正在检").map((data, index) => { data.index = this.couter1; this.couter1++; // 计数器递增 return data; }); this.matchedData.forEach(data => { if (data.States === '叫号') { console.log("叫号",data); this.startSpeech({...data, RoomNumber: roomnumber}); } }); }catch(e){ console.log("获取数据库信息失败"); } },想要每5秒从数据库里面获取到的数据,每次显示在页面上都按照序号排序。原本数据库里面有六条数据,无论循环多少次,序号都是从1 开始排
根据你提供的代码,我看到你想要实现以下功能:
1. 在页面加载时调用`grilData`和`manData`方法来获取数据。
2. 每隔5秒钟调用一次`grilData`和`manData`方法来更新数据。
3. 从数据库中获取到的数据按序号排序,并将其显示在页面上。
根据你的需求,我修改了一下你的代码,帮你实现了这些功能:
```javascript
mounted() {
this.grilData();
this.manData();
setInterval(() => {
this.grilData(); // 每5秒获取一次数据
this.manData();
}, 5000);
},
async grilData() {
try {
const roomnumber = '03';
const response = await axios.get('/line.json'); //女生数据
const CTDatas = response.data;
console.log("CTDatas", CTDatas);
//让获得的数据按顺序来排
this.matchedData = CTDatas.data.list.filter(data => data.States !== "正在检").map((data, index) => {
data.index = index + 1;
return data;
});
this.matchedData.forEach(data => {
if (data.States === '叫号') {
console.log("叫号", data);
this.startSpeech({...data, RoomNumber: roomnumber});
}
});
} catch (e) {
console.log("获取数据库信息失败");
}
}
```
这样,每5秒钟你就会从数据库中获取最新的数据,并按照序号排序后显示在页面上。注意,我将定时器的间隔改为了5000毫秒,以符合你的需求。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)