如何停止/取消Fabric.js中的requestAnimFrame（）

Question

我正在尝试将视频添加到Fabric.js，我完成了。

但有一个问题：

如何停止或取消requestAnimFrame()？

实施例：

var canvas = new fabric.Canvas('c'); 
var videoEl = document.getElementById('video'); 
var video = new fabric.Image(videoEl); 

canvas.add(video); 
video.getElement().play(); 

fabric.util.requestAnimFrame(function render() { 
    canvas.renderAll(); 
    fabric.util.requestAnimFrame(render); 

    var current_time = videoEl.currentTime; 
    if(current_time >= 5) { 
    videoEl.pause(); 
    console.log(current_time); 
    } 

}); 

https://jsfiddle.net/l2aelba/kro7h6rv/

这是后5秒的视频将停止。我将停止/取消requestAnimFrame

导致高CPU负载

Answer 1

我现在：cancelRequestAnimFrame()

window.cancelRequestAnimFrame = (function(){ 
    return window.cancelAnimationFrame || 
      window.webkitCancelRequestAnimationFrame || 
      window.mozCancelRequestAnimationFrame || 
      window.oCancelRequestAnimationFrame || 
      window.msCancelRequestAnimationFrame || 
      clearTimeout 
})(); 

var canvas = new fabric.Canvas('c'); 
var videoEl = document.getElementById('video'); 
var video = new fabric.Image(videoEl); 

canvas.add(video); 
video.getElement().play(); 

var request; 
var render = function() { 
    canvas.renderAll(); 
    request = fabric.util.requestAnimFrame(render); 
    var current_time = videoEl.currentTime; 
    if(current_time >= 5) { 
     videoEl.pause(); 
     cancelRequestAnimFrame(request); <--- This 
    } 
} 

videoEl.play(); 
fabric.util.requestAnimFrame(render); 

演示：https://jsfiddle.net/l2aelba/kro7h6rv/2/