使用 php/mysql 构建带有自动播放视频或图像滑块“播放列表”

Question

我正在尝试使用视频创建倒数计时器。计时器需要从 MySQL 表加载数据，例如倒计时时间、休息时间以及计时器需要运行的组数、视频（或在没有视频的情况下的图像）。计时器开始倒计时，但还需要开始自动播放图像滑块的视频。时间结束时开始倒计时。这个过程一直持续到达到组数。然后需要点击进入下一个倒计时或在短暂的倒计时休息后加载队列中的下一个。我可以使用 php 从 MySQL 加载数据并创建一个 while 循环来传递 jQuery/JavaScript 脚本中需要的变量。但我不确定这是否是正确的方法。这是我的方法，有一个与单击开始/停止/重置按钮相关的错误，这会导致倒计时期间的速度增加，以及一些关于倒计时的不良结果。对该错误的修复将不胜感激。

Answer 1

您的计时器问题来自以下代码行：

myTimer = setInterval(timerTick, myTimerSpeed);

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

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

你的朋友所做的是确保在开始一个新的变量之前没有他的变量引用的运行间隔。

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

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

并使用var myTimer = false;. 那应该可以解决您的计时器问题

为了修复转换，我基本上从计时器启动/停止功能中删除了它们的逻辑。所有转换现在都由timerTick().

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

我在代码 ( resetAll()& resetCurrent()) 中包含了两个重置功能，因为我不知道您是要重置所有内容还是只重置当前计时器。

它现在应该如下工作：设置 -> 中断 (5x) 并在最后一次中断PAUSE时显示，而不是显示Next Exercise（loadNext()如果您希望用户能够手动启动它，您可以添加一个单击侦听器调用）。

在loadNext()您可以加载图像，下一个练习，如果你取消注释startTimer()它会马上开始。

结果： 小提琴

这是否如您所愿？