Question

我正在开发一个javascript应用程序，我必须这样做。

每隔5秒检查页面是否包含带标记的元素。
一旦检测到标签，然后启动我的视频跟踪功能。
请勿每隔5秒再次检查页面是否包含带标记的元素 - 一旦检测到标记并且我的视频跟踪功能已启动。

这是我的代码：

<script>
       setInterval(function() { 
        var myVideo = document.getElementsByTagName('video')[0];

        console.log(myVideo);
        if (myVideo !=  null)
          {
      myVideo.id = 'video-stream';
  var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

  colors.on('track', function(event) {
    if (event.data.length === 0) {
      // No colors were detected in this frame.
    } else {
      event.data.forEach(function(rect) {
        console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
      });
    }
  });

  tracking.track("#video-stream", colors);
          }
         }, 5000);
  </script>

现在，即使检测到某个标记，它也会继续检查，那么一旦if (myVideo != null)条件满足并且已经进入它，我该如何阻止它进行检查？

任何建议都将受到高度赞赏。

Answer 1

setInterval函数返回一个值，然后您可以使用该句号与clearInterval一起停止间隔，所以在您的情况下：

var interval = setInterval(function() { 
    ...
    if (myVideo !==  null) {
        clearInterval(interval)
    }
    ...
}, 5000);

我希望有所帮助。

Answer 2

创建一个函数，如果标记不存在，则在5s后调用自身：

function testVideo() {
  var myVideo = document.getElementsByTagName('video')[0];

  console.log(myVideo);
  if (myVideo != null) {
    myVideo.id = 'video-stream';
    var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

    colors.on('track', function(event) {
      if (event.data.length === 0) {
        // No colors were detected in this frame.
      } else {
        event.data.forEach(function(rect) {
          console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
        });
      }
    });

    tracking.track("#video-stream", colors);
  }
  else {
    setTimeout(test, 5000); //try again in 5s
  }
} //testVideo

testVideo(); //call the function

Answer 3

您应该在变量中定义间隔，当您检测到视频时，应使用clearInterval()

https://jsfiddle.net/o127oqjr/

var myInterval = setInterval(function() { 
  var myVideo = document.getElementsByTagName('video')[0];

  console.log(myVideo);
  if (myVideo !=  null)
  {
    clearInterval(myInterval);
    myVideo.id = 'video-stream';
    var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

    colors.on('track', function(event) {
      if (event.data.length === 0) {
        // No colors were detected in this frame.
      } else {
        event.data.forEach(function(rect) {
          console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
        });
      }
    });

    tracking.track("#video-stream", colors);
  }
    else{
    console.log('notFound')
  }

}, 5000);

如何在javascript中每隔几分钟开始和停止检查一个条件？

3 个答案: