如何用JS迭代器编写这个画布绘制循环？

Question

我正在阅读一篇关于在画布上不断绘制HTML5视频播放器框架的文章。我有一段时间没有听说过JS迭代器，我觉得它有一个性能优势，所以我想知道如何将这组画布绘画函数写入迭代器：

function canvasVideo(){
    //DECLARE VARIABLES

    var $videoPlayer = $('#Video-Player');
    var $canvasPlayer = $('#Canvas-Player');
    var videoPlayer = $videoPlayer[0];
    var canvasPlayer = $canvasPlayer[0];
    var context = canvasPlayer.getContext("2d");

    //DEFINE FUNCTIONS

    //draw the video
    function  draw() {

      //Background
      context.fillStyle = '#ffffaa';
      context.fillRect(0, 0, canvasPlayer.width, canvasPlayer.height);

      //video
      context.drawImage(videoPlayer , 0, 0);

   }

   //update canvas at set interval with video frames
    function canvasRun(int){

        //set timer with interval
        var canvasTimer = setTimeout(canvasRun, int);

        //draw the video frame
        draw();
    }
    function videoLoaded(event){
        canvasRun(20);
    }

    //HANDLE EVENTS

    $videoPlayer.on("canplaythrough", function (){
        videoLoaded();
    });
}

如何使用JS迭代器完成这项工作？

我已经尝试过使用教程来学习迭代器，但是通用的例子让我很困惑，并且认为通过这样的例子看到它可以帮助我学习。