javascript - 为具有不同索引的js函数创建循环

Question

我的这部分代码非常适合我。它创建两个圆形进度条并根据给定的百分比值对它们进行动画处理。

有两个函数 timer_0 和 timer_1 除了索引之外几乎相同。如何创建循环并通过后缀调用这些函数。任何帮助将不胜感激。

Html部分

<div class="row">
  <div class="col-sm-3">
    <div class="progress progress-radial">

      <svg width="160" height="160" viewBox="0 0 160 160" data-progress-value="95">
        <circle class="progress-meter" cx="80" cy="80" r="78" fill="none" stroke-width="4" />
        <circle style="stroke-dasharray: 490.088; stroke-dashoffset: 50.000;" stroke='red' class="progress-value" cx="80" cy="80" r="78" fill="none" stroke-width="4" />
      </svg>

      <div class="progress-body">
        <div class="progress-data-value">
          60%
        </div>
        <div class="progress-title">
          Skill
        </div>
      </div>

    </div>
  </div>

  <div class="col-sm-3">
    <div class="progress progress-radial">

      <svg width="160" height="160" viewBox="0 0 160 160" data-progress-value="95">
        <circle class="progress-meter" cx="80" cy="80" r="78" fill="none" stroke-width="4" />
        <circle style="stroke-dasharray: 490.088; stroke-dashoffset: 50.000;" stroke='red' class="progress-value" cx="80" cy="80" r="78" fill="none" stroke-width="4" />
      </svg>

      <div class="progress-body">
        <div class="progress-data-value">
          20%
        </div>
        <div class="progress-title">
          Skill
        </div>
      </div>

    </div>
  </div>


</div>

Javascript部分

    jQuery(document).ready(function() {

    jQuery('circle.progress-value').each(function(){
        progress_circle_set = 100 - parseInt( jQuery(this).parent().parent().find('.progress-data-value').text() );
        jQuery(this).attr('data-progress-set', Math.round(progress_circle_set * 490 / 100));
    });

    timer_0();
    function timer_0() {
        progress_circle_set = jQuery('.progress-value').eq(0).attr('data-progress-set');

        if ( jQuery('.progress-value').eq(0).attr('data-progress-current' ) ) {
            progress_circle_current = jQuery('.progress-value').eq(0).attr('data-progress-current' );
        } else {
            progress_circle_current = 490;
        }

        progress_circle_current--;
        jQuery('.progress-value').eq(0).attr('data-progress-current', progress_circle_current );

        if ( progress_circle_current != progress_circle_set ) {
            jQuery('circle.progress-value').eq(0).css('stroke-dashoffset', progress_circle_current );
        } else {
            return;
        }

        setTimeout(timer_0, 10);
    }

    timer_1();
    function timer_1() {
        progress_circle_set = jQuery('.progress-value').eq(1).attr('data-progress-set');

        if ( jQuery('.progress-value').eq(1).attr('data-progress-current' ) ) {
            progress_circle_current = jQuery('.progress-value').eq(1).attr('data-progress-current' );
        } else {
            progress_circle_current = 490;
        }

        progress_circle_current--;
        jQuery('.progress-value').eq(1).attr('data-progress-current', progress_circle_current );

        if ( progress_circle_current != progress_circle_set ) {
            jQuery('circle.progress-value').eq(1).css('stroke-dashoffset', progress_circle_current );
        } else {
            return;
        }

        setTimeout(timer_1, 10);
    }
});

Answer 1

重复代码从来都不是一个好习惯。如果您仔细观察，您可能会发现唯一的区别是这些行:

jQuery('.progress-value').eq(0)
jQuery('circle.progress-value').eq(0)

因此，您可以这样做:

function timer(i) {
    progress_circle_set = jQuery('.progress-value').eq(i).attr('data-progress-set');

    if ( jQuery('.progress-value').eq(i).attr('data-progress-current' ) ) {
        progress_circle_current = jQuery('.progress-value').eq(i).attr('data-progress-current' );
    } else {
        progress_circle_current = 490;
    }

    progress_circle_current--;
    jQuery('.progress-value').eq(i).attr('data-progress-current', progress_circle_current );

    if ( progress_circle_current != progress_circle_set ) {
        jQuery('circle.progress-value').eq(i).css('stroke-dashoffset', progress_circle_current );
    } else {
        return;
    }

    setTimeout(function(){
        timer(i);
    }, 10);
}

timer(0);
timer(1);

更一般地说:

var numOfTimers = 2;
for(var i = 0; i < numOfTimers; i++){
    timer(i);
}