Jquery 如何仅在div位于view端口时启动svg动画

我希望仅当svg动画在视口中可见时才启动它。因为我的svg容器位于底部。我尝试了一些方法，如下所示。请告诉我如何修理它

函数IsElementViewPort（元素）{
变量$elem=$（elem）；
//获取页面的滚动位置。
var scrollem=（（navigator.userAgent.toLowerCase（）.indexOf（'webkit'）！=-1）？'body'：'html'）；
var viewportTop=$（scrolllem.scrollTop（）；
var viewportBottom=viewportTop+$（window）.height（）；
//获取元素在页面上的位置。
var elemTop=Math.round（$elem.offset（）.top）；
var elemBottom=elemTop+$elem.height（）；
返回（（elemTopviewportTop））；
}
函数checkAnimation（）{
var$elem=$（“#ourprocessFlowchartContainer”）；
var animationTosquare=$（“#contract_anim”）.get（0）；
log（iselementviewport（$elem））；
if（IsElementViewport（$elem）==true）{
//启动动画
animationTosquare.beginElement（）；
}否则{
animationTosquare.endElement（）；
}
}
$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
检查动画（）；
});
});
正文{
背景色：#555；
}
问题在于每次调用checkAnimation（）时都会重新触发动画。我添加了一个标志以确保不会发生这种情况。在这里工作：


你的密码在哪里？
var waiting = true;
function checkAnimation() {
  var $elem = $('#ourprocessFlowchartContainer');
  var animationTosquare =$("#contract_anim").get(0);
  console.log(isElementInViewport($elem));
  if (isElementInViewport($elem)==true) {
    // Start the animation
    if(waiting) {
      animationTosquare.beginElement();
      waiting = false;
    }
  } else {
    if(!waiting) {
      animationTosquare.endElement();
      waiting = true;
    }
  }
}

$(document).ready(function(){
checkAnimation();
$(window).scroll(function(){
    checkAnimation();
  });
});