將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();
}