javascript - 将 javascript 函数放入其他函数的正确语法

Question

我有一些小动画的代码。

function circle_progess() {
  var divElement = $('div'); //log all div elements
  if (retina()) {
    $(".whiteCircle").knob({
      'min': 0,
      'max': 100,
      'readOnly': true,
      'width': 240,
      'height': 240,
      'bgColor': 'rgba(255,255,255,0.5)',
      'fgColor': 'rgba(255,255,255,0.9)',
      'dynamicDraw': true,
      'thickness': 0.1,
      'tickColorizeValues': true
    });

    $(".circleStat").css('zoom', 0.5);
    $(".whiteCircle").css('zoom', 0.999);
  } else {

    $(".whiteCircle").knob({
      'min': 0,
      'max': 100,
      'readOnly': true,
      'width': 120,
      'height': 120,
      'bgColor': 'rgba(255,255,255,0.5)',
      'fgColor': 'rgba(255,255,255,0.9)',
      'dynamicDraw': true,
      'thickness': 0.1,
      'tickColorizeValues': true
    });
  }

  $(".circleStatsItemBox").each(function() {
    var value = $(this).find(".count > .number").html();
    var unit = $(this).find(".value > .unit").html();
    var percent = $(this).find("input").val() / 100;

    countSpeed = 2300 * percent;
    endValue = value;

    $(this).find(".count > .unit").html(unit);
    $(this).find(".count > .number").countTo({
      from: 0,
      to: endValue,
      speed: countSpeed,
      refreshInterval: 50
    });

    //$(this).find(".count").html(value*percent + unit);
  });
}

我想用上面的代码替换下面的代码行，该代码行在滚动时会发出警报。所以我在滚动上执行函数。我似乎无法集成代码，有人可以帮助我吗？

var $findme = $('.whiteCircle');

function Scrolled() {
  $findme.each(function() {
    var $section = $(this),
      findmeOffset = $section.offset(),
      findmeTop = findmeOffset.top,
      findmeBottom = $section.height() + findmeTop,
      scrollTop = $(document).scrollTop(),
      visibleBottom = window.innerHeight,
      prevVisible = $section.prop('_visible');

    if ((findmeTop > scrollTop + visibleBottom) ||
      findmeBottom < scrollTop) {
      visible = false;
    } else visible = true;

    if (!prevVisible && visible) {
      alert($section.text());
    }
    $section.prop('_visible', visible);
  });

}

function Setup() {
  var $top = $('#top'),
    $bottom = $('#bottom');

  $top.height(500);
  $bottom.height(500);

  $(window).scroll(function() {
    Scrolled();
  });
}

$(document).ready(function() {
  Setup();

});

简单地说，我想要这个......

var $findme = $('circle_progress');

function Scrolled() {
    $findme.each(function() {
          var $section = $(this),
            findmeOffset = $section.offset(),
            findmeTop = findmeOffset.top,
            findmeBottom = $section.height() + findmeTop,
            scrollTop = $(document).scrollTop(),
            visibleBottom = window.innerHeight,
            prevVisible = $section.prop('_visible');

          if ((findmeTop > scrollTop + visibleBottom) ||
            findmeBottom < scrollTop) {
            visible = false;
          } else visible = true;

          if (!prevVisible && visible) {


            function circle_progess() {

              var divElement = $('div'); //log all div elements

              if (retina()) {

                $(".whiteCircle").knob({
                  'min': 0,
                  'max': 100,
                  'readOnly': true,
                  'width': 240,
                  'height': 240,
                  'bgColor': 'rgba(255,255,255,0.5)',
                  'fgColor': 'rgba(255,255,255,0.9)',
                  'dynamicDraw': true,
                  'thickness': 0.1,
                  'tickColorizeValues': true
                });

                $(".circleStat").css('zoom', 0.5);
                $(".whiteCircle").css('zoom', 0.999);


              } else {

                $(".whiteCircle").knob({
                  'min': 0,
                  'max': 100,
                  'readOnly': true,
                  'width': 120,
                  'height': 120,
                  'bgColor': 'rgba(255,255,255,0.5)',
                  'fgColor': 'rgba(255,255,255,0.9)',
                  'dynamicDraw': true,
                  'thickness': 0.1,
                  'tickColorizeValues': true
                });

              }



              $(".circleStatsItemBox").each(function() {
                var value = $(this).find(".count > .number").html();
                var unit = $(this).find(".value > .unit").html();
                var percent = $(this).find("input").val() / 100;

                countSpeed = 2300 * percent;
                endValue = value;

                $(this).find(".count > .unit").html(unit);
                $(this).find(".count > .number").countTo({
                  from: 0,
                  to: endValue,
                  speed: countSpeed,
                  refreshInterval: 50
                });

                //$(this).find(".count").html(value*percent + unit);
              });

            }

添加了 html 以清晰地显示输出的外观......

<div class="circleStatsItemBox blue">
<div class="header">Levels of Involvement</div>
<span class="percent">% Increase</span>
<div class="circleStat"> <input value="20" class="whiteCircle" type="text"> </div>
<div class="footer"><span class="count"> <span class="number">40</span> <span>Before</span>
</span> <span class="sep"> / </span> <span class="value"> <span class="number">50</span><span class="unit"> During</span></span> </div>
</div>

Answer 1

您不需要将函数定义放在其他代码中。只需将其放在外面并写入:

if (!prevVisible && visible) {
    circle_progress();
}