異なるインデックスを持つjs関数のループを作成します

Question

私はこの素晴らしいコードを私にとって役に立ちます。これは、2つの円のプログレスバーを作成し、与えられたパーセンテージ値に応じてアニメートします。

インデックスを除いてほぼ同じである2種類の機能があります。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

コードを繰り返す良い練習になることはありません。あなたがよく見ている場合、あなたは唯一の違いは、これらの行であることを見つけることがあります。より一般的に

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

をそして：

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

そのために、あなたの代わりにこれを行うことができます

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