使用自动播放视频或图像滑块构建jquery/javascript HIIT；播放列表“；使用xml和php/mysql

我试图创建一个视频倒计时计时器。计时器需要从MySQL表中加载数据，如倒计时时间、中断时间、计时器需要运行的集合数、视频（或无视频时的图像）。 计时器开始倒计时，但还需要开始自动播放图像滑块的视频。当时间结束时，开始倒数计时。此过程将继续，直到达到集数。然后需要单击进入下一个倒计时，或者在短暂的倒计时中断后加载队列中的下一个

我可以使用php从MySQL加载数据，并创建一个while循环来传递jQuery/JavaScript脚本中所需的变量。但我不确定这是否正确

这是我的方法，与点击开始/停止/重置按钮相关的错误导致倒计时时速度增加，以及一些关于倒计时的不必要结果

如果能修复这个bug，我们将不胜感激

我的代码：

var startTime=10；
var-restime=5；
var currentTime=0；
var-myTimer；
var myTimerSpeed=1000；//1秒
var currentSet=0；
var currentPause=0；
var totalSets=5；
重置计时器（）；
restTimer（）；
$（“#暂停”）.hide（）；
$（'#next_exe'）.hide（）；
$（“#播放器”）.show（）；
$（'input[value=“start”]”）。单击（开始计时器）；
$（'input[value=“stop”]”）。单击（停止计时器）；
$（'input[value=“reset”]”）。单击（resetTimer）；
$（'#currentset'）.html（currentset）；
$（'#totalset'）.html（totalset）；
$（'#currentpause'）.html（currentpause）；
$（'#totalpause'）.html（totalset）；
函数resetTimer（）{
停止计时器（）；
当前时间=开始时间；
$（'#timer'）.html（当前时间）；
}
函数startTimer（）{
currentSet++；
如果（当前时间）
您的计时器问题来自以下代码行：

myTimer = setInterval(timerTick, myTimerSpeed);

间隔并不是一个真正的变量，当您调用
setInterval
时，您正在创建一个间隔，并返回对该间隔的引用

因此，如果上面的代码被调用两次，您将运行两个间隔，但只引用第二个间隔，这意味着它将永远运行，并且不再具有停止第一个间隔所需的值

您的朋友所做的是确保在启动新变量之前，他的变量没有引用任何运行间隔

通过将上面的行替换为以下内容，可以获得相同的结果：

if(myTimer) clearInterval(myTimer);
myTimer = setInterval(timerTick, myTimerSpeed);

并使用
var myTimer=false；
向计时器添加初始值。这将解决计时器问题

为了修复转换，我基本上从计时器启动/停止函数中删除了它们的逻辑。所有转换现在都由
timerTick（）
处理

我添加了一个
isBreak
变量来记住当前是否处于中断或设置中，然后用它来确定下一步是什么步骤以及要获取的计时器初始值

我在代码中包含了两个重置函数（
resetAll（）
&
resetCurrent（）
），因为我不知道是要重置所有内容还是只重置当前计时器

它现在应该按如下方式工作：设置->中断（5x），在最后一次中断时，它显示的不是
暂停
，而是
下一个练习
（如果您希望用户能够手动启动它，您可以添加一个调用
loadNext（）
的单击侦听器）

在
loadNext（）
中，您可以为下一个练习加载图像，如果取消注释
startTimer（）
它将立即启动

结果：

这是否如您所希望的那样工作？
乍一看，由于几乎没有可用的信息，您似乎没有正确地调用
clearInterval（）
当您单击“停止”按钮时，或在您的“开始”或“重置”按钮上复制所述间隔时，您的朋友的代码似乎工作正常，您是否也遇到了问题？或者您的问题主要是关于了解您的错误原因吗？@Pepper，我想选择正确的方法。我知道我只有一个错误，谢谢您我首先开始使用我的代码，直到知道我没有采用friend的解决方案。如果你运行JSFIDLE，你会发现尽管我确实有一个bug，但我已经做了一个更“完整”的解决方案我想要实现的解决方案。我缺少的是如何在第一个视频循环结束并加载下一个视频循环时重复所有这些操作！（提示：如果编辑的版本取代了原来的提琴，那么你可以删除原来的版本以及关于它不起作用的评论。如果你认为OP正在跟进，你可以添加一条关于查看的评论，但其他情况下，为了还没有看到它的读者的利益，答案在原始状态下更好。你可以保留它o如果您希望所有未来的读者都能看到进展情况，并且有真正的价值，则需要多次更新。）谢谢你的提示，我也不知道修订历史！很棒，很好的更改，+1。你已经删除了它，但我对将来在帖子中更新的承诺有点担心，因为它们通常会保留多年。但是如果你真的打算回来编辑，那就好了。@Pepper在提供的小提琴中，我相信它会有用的k、 ledt唯一的问题是实现loadNext（）的正确方法，我正在考虑使用ajax调用，但我会解决的。Thanx很多。我必须承认我被卡住了。我找不到使用@Pepper提供的loadNext的正确方法。问题是，我想让多个具有数据属性的div添加应用某种循环，或者使用ajax调用更新当前div的所有数据并允许instant执行startTimer（）。请参阅相关[