하나의 함수로 4 개의 함수를 통합

Question

하나의 페이지에 4 개의 카운터가 있습니다. 각 함수마다 별도의 함수를 호출했습니다. 모든 함수를 단일 함수로 통합해야합니다.

var tt1 = setInterval(function() { 
 
    startTimee() 
 
}, 50); 
 
var counter1 = 1; 
 

 
function startTimee() { 
 
    if (counter1 == 10) { 
 
    clearInterval(tt1); 
 
    } else { 
 
    counter1++; 
 
    } 
 
    document.getElementById('counter1').innerHTML = counter1; 
 

 
} 
 
var tt = setInterval(function() { 
 
    startTime() 
 
}, 5); 
 
var counter = 1; 
 

 
function startTime() { 
 
    if (counter == 600) { 
 
    clearInterval(tt); 
 
    } else { 
 
    counter++; 
 
    } 
 
    document.getElementById('counter2').innerHTML = counter; 
 
} 
 
var tt2 = setInterval(function() { 
 
    startTime2() 
 
}, 50); 
 
var counter2 = 1; 
 

 
function startTime2() { 
 
    if (counter2 == 30) { 
 
    clearInterval(tt2); 
 
    } else { 
 
    counter2++; 
 
    } 
 
    document.getElementById('count3').innerHTML = counter2; 
 
} 
 
var tt3 = setInterval(function() { 
 
    startTime3() 
 
}, 50); 
 
var counter3 = 1; 
 

 
function startTime3() { 
 
    if (counter3 == 6) { 
 
    clearInterval(tt3); 
 
    } else { 
 
    counter3++; 
 
    } 
 
    document.getElementById('counter4').innerHTML = counter3; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="counter1">10</div> 
 
<div id="counter2">600</div> 
 
<div id="counter3">30</div> 
 
<div id="counter4">6</div>

Answer 1

당신은 같은 것을 할 수 있습니다 : 그것은 지금까지 가장 최적의 코드가 아닙니다, 그러나 당신을 위해 단지 예입니다

var time = 1, interval = setInterval(tick, 50); 
 

 
function tick() 
 
{ 
 
    if (time <= 10) 
 
    document.getElementById('counter1').innerHTML = time; 
 

 
    if (time <= 600) 
 
    document.getElementById('counter2').innerHTML = time; 
 

 
    if (time <= 30) 
 
    document.getElementById('counter3').innerHTML = time; 
 

 
    if (time <= 6) 
 
    document.getElementById('counter4').innerHTML = time;  
 

 
    if (++time > 600) 
 
    clearInterval(interval); 
 
}

<p id="counter1"></p> 
 
<p id="counter2"></p> 
 
<p id="counter3"></p> 
 
<p id="counter4"></p>

을 주요 원칙을 얻으십시오.

Answer 2

값을 가져 오는 위치에 따라이 작업을 수행 할 수있는 몇 가지 방법이 있습니다.

첫 번째 옵션은 span의 id 및 계산할 최대 값을 보유하는 개체를 만드는 것입니다.

var countCeiling = { 
 
    counter1: { 
 
    end: 10 
 
    }, 
 
    counter2: { 
 
    end: 600, 
 
    start: 0 
 
    }, 
 
    counter3: { 
 
    end: 30, 
 
    start: 0 
 
    }, 
 
    counter4: { 
 
    end: 6, 
 
    start: 0 
 
    } 
 
}; 
 

 
var timerID = setInterval(function() { 
 
    var stopTimer = true; 
 

 
    for (var id in countCeiling) { 
 
    var data = countCeiling[id]; 
 
    var span = document.getElementById(id); 
 

 
    var val = data.current || data.start || 0; 
 

 
    data.current = val + 1; 
 

 
    if (val <= data.end) { 
 
     span.innerHTML = val; 
 
     stopTimer = false; 
 
    } 
 

 
    } 
 

 
    if (stopTimer) { 
 
    clearInterval(timerID); 
 
    } 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="counter1">10</div> 
 
<div id="counter2">600</div> 
 
<div id="counter3">30</div> 
 
<div id="counter4">6</div>