將四個函數集成到單個函數中

我在一個頁面中有四個計數器我爲每個函數調用了單獨的函數。我需要將所有函數集成到單個函數中。將四個函數集成到單個函數中

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>

來源

2016-07-01 user3386779

你試圖讓他們都一樣'setTimeout'代碼下運行？ –

耶需要在相同的setInterval下運行 – user3386779

你可以這樣做：

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>

還遠不是最優化的代碼，但它僅僅是一個例子給你得到主要原則。

來源

2016-07-01 04:54:25

'return clearInterval（...）'是一種很奇怪的方式 - 它意味着有一個有意義的值被返回。如果您將該'if'語句移到該函數的末尾，則根本不需要'return'語句。 – nnnnnn

@nnnnnn是的，你說得對，我修好了。謝謝。 –

@nnnnnn在JavaScript中，'return'的用法與其他強類型語言不同，並且使用'return clearInterval（interval）;'對於任何關注的讀者都是完全清楚的。在這種語言中，返回值無用/不相關是很常見的。 –

您可以採取幾種方法來完成此操作，具體取決於值的來源。

第一個選項是創建一個對象，該對象包含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>

來源

2016-07-01 04:57:39

你忘了實際測試'stopTimer'，但我喜歡迭代的方法。如果你說'var val = data.current || data.start || 0;''你可以爲'counterX'對象設置'start'屬性。 – nnnnnn

@nnnnnn好點，謝謝。固定。我反抗了在這個配置數組中使用'current'屬性的衝動......最近對我來說太多'TypeScript'了;） –

將四個函數集成到單個函數中

回答

相關問題