setinterval函数，使用变量的前一个/旧值

setinterval function using previous/ old value for a variable

本文关键字：一个 旧值 函数 变量 setinterval      更新时间：2023-09-26

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

text区域1:st=6 et=12

text区域2:st=15 et=20

我使用setinterval来检查endtime，并再次调用方法来循环。

场景：单击文本区域1。st＝6 et＝12。播放时，单击文本区域2。条件video.currentTime>et为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>

这并不是说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的静态变量。这样，当用户点击另一个文本区域时，它将清除现有的间隔，以确保它不再干扰。

使用clearInterval消除旧的间隔！

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

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

您的"循环"当前会为每个间隔创建一个新的间隔，并且会得到一堆混乱的间隔。setInterval确实每x毫秒执行一次，其中setTimeout在x毫秒后执行一次。当您停止视频时，您需要清除间隔。

试试这个：

// 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接口、HTMLMediaElement接口，视频HTML5元素，以及在Mozilla的开发者网络上使用HTML5音频和视频。

相关文章：