Create loop for js functions with different indices

Question

I have this part of code that works great for me. It is creating two circle progress bars and animating them depending on the given percentage values.

There are two functions timer_0 and timer_1 that are almost the same except the indices. How can I create a loop and invoke these functions by their suffixes. Any help will be appreciated.

Html part

<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 part

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

Looks like something that would benefit from being defined as a widget. — Roamer-1888
– Roamer-1888, Commented Nov 10, 2017 at 1:10

Derek 朕會功夫 · Accepted Answer · 2017-11-07 23:28:16Z

Repeating code is never a good practice. If you take a closer look, you may find that the only difference are these lines:

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

And therefore, you can do this instead:

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);

And more generally:

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

Collectives™ on Stack Overflow

Create loop for js functions with different indices

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related