各位先進好:
最近在練習javascript object相關應用時,
建置了一個簡易的計時工具,其中有將setInterval、clearInterval
宣告在一個object(timer)中,並供按鈕的click事件叫用。執行上沒有出錯,
但在抓取timer object負責暫存累積時間的屬性時(有暫停function),發現
屬性值並沒有隨時間變動,但Function在跑的時候該累積的值卻有正常顯示在畫面上。
請問他的值實際上有存在記憶體當中嗎?
有問題的物件屬性是** ObjTimer['s0'].tat**
程式碼如下,並附上codepen連結
https://codepen.io/wunzack/pen/MObNqP?editors=0011
var i=1;
var ObjTimer={};
var ObjRowEle={};
ObjTimer['s0']=new timer(0,'s0');
ObjRowEle['e0']=new rowEle(0);
// rowEle(0);
function rowEle(id){
//id==i
console.log(id);
$('#s'+id).click(function(){
ObjTimer['s'+id].timerSet();
})
$('#p'+id).click(function(){
ObjTimer['s'+id].pause();
})
}
function timer(tat,id) {
this.tat=tat;
this.id=id;
var tickEle;
this.timerSet = function () {
tickEle = setInterval(function () { timerTick() }, 1000);
}
function timerTick() {
console.log(tat);
tat += 1;
$('#timeTag'+id).html(tat);
}
this.pause = function () {
clearInterval(tickEle);
}
}
$('#addRowBtn').click(function(){
var rowStr="<div class='row'>"
+"<div class='col' id='timeTags"+i+"'>0</div>"
+"<div class='col'>"
+" <div class='btn'> "
+" <div class='ss' id='s"+i+"'>start</div>"
+" </div>"
+" <div class='btn'> "
+" <div class='ss' id='p"+i+"'>stop</div>"
+" </div>"
+" </div>"
+" </div>";
$('.content').append(rowStr);
ObjTimer['s'+i]=new timer(0,'s'+i);
// ObjRowEle['e'+i]=new rowEle(i);
// rowEle(i);
ObjRowEle['e'+i]=new rowEle(i);
i++;
})
但在抓取timer object負責暫存累積時間的屬性時(有暫停function),發現
屬性值並沒有隨時間變動
這裡不是很理解,您怎麼抓取呢?
我是直接在console畫面下 輸入ObjTimer['s0'].tat來看。
其中照我的理解他的值應該會隨setInterval的function來變更值,可他始終都是0,所以覺得有疑問。
因為你在constructor中就是塞給他0
阿?然後你一直操作的是tat
這個變數,不是timer object的屬性tat
。
function timerTick() {
console.log(tat);
tat += 1;
$('#timeTag'+id).html(tat);
}
這段這裡的 tat 和 this.tat 是不同變數,
累加的是 tat ,Console 的是 this.tat,
所以抓不到XD,
然後他們都存在於記憶體,只是處於不同地方。
function timer(tat,id) {
this.tat=tat;
關鍵在這裡,this.tat=tat
,這裡雖然把 tat 丟給 this.tat,但是只是把 tat 的值丟給 this.tat,並不是把記憶體指過去(C++的說法),所以操作 tat 並不會引響 this.tat ,因為他們存在於不同的記憶體中。
原來如此!!感謝各位大大的回答。
如果要變更物件屬性的值
用傳址的方式是像var dke=this;
這樣對嗎?
function timer(tat2,id) {
this.tat=tat2;
var dke=this;
this.id=id;
var tickEle;
this.timerSet = function () {
tickEle = setInterval(function () { timerTick() }, 1000);
}
function timerTick() {
console.log(dke.tat);
dke.tat += 1;
$('#timeTag'+id).html(dke.tat);
}
this.pause = function () {
clearInterval(tickEle);
}
}
後來改成這樣就可以變更屬性值了!!
恩,很常這樣用,把 this
存起來。