javascript - 当元素处于 View 中时运行脚本

Question

有人可以修复此脚本，以便它在元素位于 View 中时运行。换句话说，它需要等到可见才能运行。谢谢! -丹

$('.amount-chart').each(function(){
var $chart = $(this),
  size = parseFloat( $chart.outerWidth() ),
  clearSet;

$chart.css({
  height: size
})
.easyPieChart({
    size: size,
    animate: 2000,
            onStep: function(from, to, currentValue) {
                $(this.el).find('span.amount-counter').text(Math.round(currentValue));
            }
});

$(window).on('resize', function(){

   size = parseFloat( $chart.outerWidth() );

   $chart.css({
      height: size
   });

   //clearTimeout(clearSet);
   //clearSet = setTimeout(function(){
      $chart.removeData('easyPieChart').find('canvas').remove();
      $chart.easyPieChart({
         size: size,
         animate: 1
      });
   //}, 100);
});    

});

Answer 1

感谢您的完整描述!看demo

HTML

<div id="el">Pie Chart</div>    

JavaScript

var inited = false
function init() {
   // init your chart
   // code here run once on element with id="el" will in viewport
}

$(window).on('scroll', function() {
  if ( inited ) {
    return
  }

  if ( el.offsetTop >= window.innerHeight + document.body.scrollTop ) {
    inited = true
    init()
  }
})