2015-10-18 207 views
2

我正在嘗試使用下面的JavaScript在設定的時間範圍內顯示數字增量。我遇到的問題是,我試圖在具有不同發送值的兩種不同情況下使用它們,但它們通過顯示相同的值而相互衝突。我如何在不同的情況下使用它們而不會相互衝突。請參見下面的代碼:增加變量

<script> 
 
var START_DATE = new Date("January 10, 2012 22:30:00"); // put in the starting date here 
 
var INTERVAL = 8; // refresh interval in seconds 
 
var INCREMENT = 6; // increase per tick 
 
var START_VALUE = 25; // initial value when it's the start date 
 
var count = 0; 
 
$(document).ready(function() { 
 
var msInterval = INTERVAL * 1000; 
 
var now = new Date(); 
 
count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE; 
 
$('#div1').html(count.toFixed(0)); 
 
window.setInterval(function(){ 
 
    count += INCREMENT; 
 
    $('#div1').html(count.toFixed(0)); 
 
}, msInterval); 
 
}); 
 
</script> 
 
<div id="div1"></div> 
 

 
<script> 
 
var START_DATE = new Date("January 10, 2012 22:30:00"); // put in the starting date here 
 
var INTERVAL = 14; // refresh interval in seconds 
 
var INCREMENT = 5; // increase per tick 
 
var START_VALUE = 15000; // initial value when it's the start date 
 
var count = 0; 
 
$(document).ready(function() { 
 
var msInterval = INTERVAL * 1000; 
 
var now = new Date(); 
 
count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE; 
 
$('#div2').html(count.toFixed(0)); 
 
window.setInterval(function(){ 
 
    count += INCREMENT; 
 
    $('#div2').html(count.toFixed(0)); 
 
}, msInterval); 
 
}); 
 
</script> 
 
<div id="div2"></div>

他們是爲了顯示基於設定值不同的輸出,但它們顯示相同的值

我會很高興和例子充分說明。

+0

因爲您正在重寫由兩個單獨的定時功能共享的全局變量。 – Terry

+0

@ user3476168使用'setTimeout(func,ms,counter);' –

+0

看起來很多不必要的全局變量。使用本地變量和功能。 – lshettyl

回答

0

使用一個功能countersUpdate與局部變量msIntervalcount和參數elm, INTERVAL, INCREMENT, START_VALUE

var now = new Date(); 
 
var START_DATE = new Date("January 10, 2012 22:30:00"); 
 

 
function countersUpdate(elm, INTERVAL, INCREMENT, START_VALUE) { 
 
    var msInterval = INTERVAL * 1000; 
 
    var count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE; 
 
    elm.html(count.toFixed(0)); 
 
    window.setInterval(function() { 
 
    count += INCREMENT; 
 
    elm.html(count.toFixed(0)); 
 
    }, msInterval); 
 
} 
 

 
countersUpdate($('#div1'), 8, 6, 25); 
 
countersUpdate($('#div2'), 14, 5, 1500);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="div1"></div> 
 
<div id="div2"></div>

+0

它沒有工作,它只是增加總數INCREMENT + INCREMENT2 = 11,它挑選11並添加到兩個輸出 – user3476168

+0

@ user3476168重構代碼,照顧局部變量 – user2314737

2

當你寫:

<script> 
    var count = 0; 
</script> 

你真正做的是加計作爲窗口對象的屬性所以:

<script> 
    var window.count = 0; 
</script> 

所以,當你嵌入在同一頁上這兩個腳本,計數變量實際上指向兩個腳本窗口對象完全相同的特性。

您可以改爲設置您自己的具有兩個計數器屬性的計數器對象。像這樣:

<script> 

    var START_DATE = new Date("January 10, 2012 22:30:00"); // put in the starting date here 
    var INTERVAL = 8; // refresh interval in seconds 
    var INCREMENT = 6; // increase per tick 
    var START_VALUE = 25; // initial value when it's the start date 
    var countersObj = {}; 
    countersObj.counter1 = 0; 

    $(document).ready(function() { 

     var msInterval = INTERVAL * 1000; 
     var now = new Date(); 

     countersObj.counter1 = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE; 
     $('#div1').html(countersObj.counter1.toFixed(0)); 

     window.setInterval(function() { 

     countersObj.counter1 += INCREMENT; 
     $('#div1').html(countersObj.counter1.toFixed(0)); 
     }, msInterval); 

    }); 

</script> 
<div id="div1"></div> 

<script> 

    var START_DATE = new Date("January 10, 2012 22:30:00"); // put in the starting date here 
    var INTERVAL = 14; // refresh interval in seconds 
    var INCREMENT = 5; // increase per tick 
    var START_VALUE = 15000; // initial value when it's the start date 

    $(document).ready(function() { 

     var msInterval = INTERVAL * 1000; 
     var now = new Date(); 

     countersObj.counter2 = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE; 
     $('#div2').html(countersObj.counter2.toFixed(0)); 

     window.setInterval(function() { 

     countersObj.counter2 += INCREMENT; 
     $('#div2').html(countersObj.counter2.toFixed(0)); 
     }, msInterval); 
    }); 

</script> 
<div id="div2"></div> 
+0

它不起作用,仍然添加相同價值div1和div2 – user3476168

+0

這將是因爲你正在以相同的時間間隔增加兩個計數器相同的金額。並不是說他們仍然與之前共享相同的變量。這可以通過將所有不想在全局範圍內共享的var定義納入ready函數的範圍來解決。這樣他們將在該功能本地化。 – atomless