使用变量的先前/旧值的 setinterval 函数答案

【问题标题】：setinterval function using previous/ old value for a variable使用变量的先前/旧值的 setinterval 函数
【发布时间】：2012-08-19 23:07:48
【问题描述】：

我想播放部分视频 (html5) 并在 2 个文本区域的“onclick”上循环播放这些部分。我将 starttime (st) 和 endtime (et) 传递给 javascript 函数。

textarea1 : st=6 et=12

textarea2 : st=15 et=20

我正在使用 setinterval 检查结束时间并再次调用方法进行循环。

场景：单击文本区域 1。 st=6 等=12。在播放时单击 textarea2。条件 video.currentTime > et 为 true 为 15 > 12，这是错误的结果。 et 值在“onclick”上没有改变。请帮忙。

这是我的代码：

function playVideo(st,et) {
   var video = document.getElementById('player');
   video.currentTime = st;
   video.play();
   int = setInterval(function() {
      if (video.currentTime > et) { // here the et still has the previous value 
          playVideo(st,et); // loop             
      }
   }, 10);
}

<video width="320" height="240" controls="controls" id="player">
   <source src="abc.mp4" type="video/mp4" />
</video>
<textarea onclick="playVideo(6,12)" >Part1 </textarea>
<textarea onclick="playVideo(15,20)">Part2</textarea>

【问题讨论】：

标签： javascript setinterval

【解决方案1】：

不是et 有以前的值，而是你永远不会摆脱旧的间隔。

与其再次调用playVideo，不如直接调用video.currentTime = st;。但是，请记住，您需要 一些东西 来停止间隔。就个人而言，我会做这样的事情：

function playVideo(st,et) {
    var video = document.getElementById('player');
    clearInterval(arguments.callee.interval);
    video.currentTime = st;
    video.play();
    arguments.callee.interval = setInterval(function() {
        if( video.currentTime > et) video.currentTime = st;
    },10);
}

我将区间保存为函数的一个属性，它本质上相当于 JS 的静态变量。这样，当用户点击另一个文本区域时，它将清除现有的间隔，以确保它不再干扰。

【讨论】：

【解决方案2】：

Get rid 使用 clearInterval！

【讨论】：

【解决方案3】：

您的问题可能是您没有清除间隔回调。尝试检查之前的（但仍处于活动状态的）间隔，并在分配新间隔之前将其清除。

var videoEndInterval = null;
function playVideo(st, et) {
    ...

    if (videoEndInterval !== null) {
        clearInterval(videoEndInterval);
    }
    videoEndInterval = setInterval(function() {
        ...
    }, 10);
}

【讨论】：

【解决方案4】：

您的“循环”当前会为每个间隔创建一个新间隔，而您会得到一团糟的间隔。 setInterval 确实每 x ms 执行一次，而 setTimeout 确实在 x ms 后执行一次。停止视频时，您需要清除间隔。

试试这个：

// var declared outside, to clear an old interval,
// but also to not have a global variable.
var stopInterval; 

var playVideo = function (st, et) {
   var video = document.getElementById('player');
   video.currentTime = st;
   video.play();

   if (stopInterval) {
     // clear an old interval, if playVideo is called twice
     window.clearInterval(stopInterval);
     stopInterval = 0;
   }

   stopInterval = window.setInterval(function() {
      if (video.currentTime > et) {
          // here your video is after et, so clear the interval and stop.
          window.clearInterval(stopInterval);
          stopInterval = 0;
          video.pause();
      }
   }, 10);
};

您还应该提示您的视频是否未缓冲、不可播放和暂停（以清除您的间隔）。

另请参阅 HTMLVideoElement Interface, HTMLMediaElement Interface, video HTML5 element，和 Using HTML5 audio and video 在 Mozilla 的开发者网络上。

【讨论】：