Question

我正在使用tracking.js进行facedetection并通过websocket将facedetection的结果发送到服务器。在下面的代码中，即使在clearInterval命令之后，setInterval的if（event.data.length！= 0）也会运行一些迭代。有人可以解释为什么会发生这种情况吗？

var mainfunc =  setInterval( function() {
     ctx.drawImage(video, 0, 0, 400, 300);

     tracking.track('#canvas', tracker);
     tracker.on('track', function(event){
         if (event.data.length != 0 ){
             var center_x = event.data[0].x + (event.data[0].width/2);
             var center_y = event.data[0].y +(event.data[0].height/2);    
             var str = center_x + " " + center_y +" " + center_image_x + " " + center_image_y + " " + flag ; 
             webSocket.send( str ); 
             // dunno why it is executing number of times ??????????

             clearInterval(mainfunc);   
         } 
    });
 } , 0);

Answer 1

您获得多次执行的可能原因是您的代码在间隔回调中注册“many”事件处理程序（每次回调都会发生PdfWriter）。然后，只有当该事件到达满足数据的条件时才清除间隔。这可能是你的逻辑中应该改变的一个基本缺陷。只有1次注册到'track'事件。

Answer 2

看起来很难理解跟踪和setInterval如何运作。

setInterval用于以设置的间隔（以毫秒为单位）反复运行一段代码。

根据tracking.js网站的说法，您只需启动跟踪一次即可跟踪内容。

尝试将代码更改为：

var trackerTask = tracking.track('#canvas', myTracker);

myTracker.on('track', function(event){
     if (event.data.length != 0 ){
         var center_x = event.data[0].x + (event.data[0].width/2);
         var center_y = event.data[0].y +(event.data[0].height/2);    
         var str = center_x + " " + center_y +" " + center_image_x + " " + center_image_y + " " + flag ; 
         webSocket.send( str ); 

         trackerTask.stop(); // stopping the tracking
     } 
 });

现在我不确定，但我想你想继续画视频。你可以这样做：

function drawVideo() {
    requestAnimationFrame(drawVideo); //this will make sure it's redrawn as soon as the browser is ready
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.drawImage(video, 0, 0, 400, 300);
}

drawVideo(); //this call is needed to initiate drawing of the video.

即使在clearInterval的javascript之后，setInterval也会运行一些循环

2 个答案: