Representación:
Requisitos: haga clic para reproducir el carrusel de datos de AQI por horas, cambie el botón para pausar, haga clic en pausar para detener la encuesta y cambie el botón para reproducir .
Código:
// setTimeout的集合(关键点哦)
timer: [],
// 当前播放状态
isPlay: false,
// idnex
selectIndex: 0,
// 包含数据
tableData:[]
方法
// 播放
play() {
// 先停止之前的播放序列
this.stop();
this.isPlay = true;
// 重新(selectIndex)开始播放
for (let i = this.selectIndex; i < this.tableData.length; i++) {
const item = this.tableData[i];
const a = setTimeout(() => {
if (this.isPlay) {
this.selectIndex = i;
// 发布地图layer上播放第i个图片
window.eventBus.$emit(
events.ADD_BIZ_MAP_LAYER,
{ data: i, layertype: CLOUD, status: `播放` }
);
// 如果是最后一条数据,则停止播放,选中index归为0
if (i === this.tableData.length - 1) {
this.stop();
this.selectIndex = 0;
}
}
}, (i - this.selectIndex) * 1000);
// 拿到当前setTimeout的集合
this.timer.push(a);
}
},
// 停止
stop() {
this.pause();
// 发布当前的index下的图片,layer那边会设置为setOpacity(0)
window.eventBus.$emit(
events.ADD_BIZ_MAP_LAYER,
{ data: this.selectIndex, layertype: CLOUD, status: `暂停` }
);
},
// 暂停
pause() {
// 播放状态改为false
this.isPlay = false;
// 清空之前的timer setTimeout的集合
for (let i = 0; i < this.timer.length; i++) {
const element = this.timer[i];
clearTimeout(element);
}
},