(loop မပတ်တတ်တဲ့ကောင်တွေသင်ပေးခဲ့စဉ်က)
Online က code snippet တခုမှာ dom collection ကို loop ပတ်ထားပုံလေး သွားတွေ.တယ်။ သူပတ်ထားတဲ့ပုံကဒီလိုလေး ဥပမာပေါ့ဗျာ။
var divs = document.getElementsByTagName(“div”);
for (var i=0; i < divs.length; i++){
}
အပေါ်က code က သာမာန်ကြည့်ရင်တော့ မှန်တယ်ထင်ရတယ် ဒါပေမဲ့ အားနည်းချက် လိုနေတာတွေရှိတယ် ။ အဓိက ပြဿ နာက ဘာလဲဆိုတော့ divs.length ကို for condition မှာထဲ့ထားတဲ့ ဒီ code
i< divs.length
အပေါ်က code က ဘာဖြစ်စေသလဲဆိုတော့ loop ကို၀င်တိုင်းမှာ divs.length ကို re evaluate လုပ်တယ် အဲ့တော့ div ရဲ. length ကိုအဲဗားပြန်တွက်တယ် (dom live collection မို.လို.တွက်တာ ) computation ကိုကျစေတယ်။ ဒါကတချက် နောက်တချက်ကတော့ပိုဆိုးတာ ဥပမာ ဒီလို code ပေါ့
<html>
<body>
<div>Hello</div>
<script>
var divs = document.getElementsByTagName(“div”);
for (var i=0; i < divs.length; i++){ //infinite loop
document.body.appendChild(document.createElement(“div”));
}
</script>
</body>
</html>
အပေါ်က code ကို run လိုက်ရင် browser က hang သွားလိမ့်မယ် not responsive ဆိုတာကိုပြလိမ့်မယ်။ ဘာလို.လဲဆိုတော့ loop ထဲမှာ div ကို append လုပ်တယ်။ ပြီးတော့ loop ၀င်လာရင် divs.length ဆိုပြီး ပြန်တွက်တယ်။ အဲ့တော့ အသစ်၀င်လာတဲ့ dom node တွေပါ ပါလာမယ်။ ဒီတော့ infinite loop ကိုဖြစ်စေတယ် အဲ့တော့ browser သည် not responsive ဆိုတာဖြစ်လာမယ်။
ဘာကြောင့် divs.length ကို browser က ခနခန ပြန် evaluate လုပ်သလဲဆိုရင် loop တခုပြီးတိုင်းမှာ dom collection ပြောင်းသွားမှာစိုးလို.။ သူက re-evaluate လုပ်ဖို.စစ်ပေးထားတာ။
တကယ်ဘယ်လိုရေးရမလဲဆိုတော့။
var divs = document.getElementsByTagName(“div”);
for (var i=0,len=divs.length; i < len; i++){ //ok now
document.body.appendChild(document.createElement(“div”));
}
for loop ကိုအဲ့လိုပုံစုံပြောင်းလိုက်ရင် အဆင်ပြေပြီ။ divs.length ကို loop initialization မှာတခါပဲ initialization လုပ်လိမ့်မယ်။
အဓိက အသက်က divs.length ကို initailization step မှာသိမ်းလိုက်တာ အဲ့တော့ divs.length ကို တခါပဲ access လုပ်မယ် loop condition မှာလို ခနခန access လုပ်လို.ခနခန ပြန်တွက်စရာမလိုဘူး
အပေါ်က for condition ထဲမှာ divs.length ကိုစစ်တဲ့ပုံစံသည် logic error တွေဖြစ်နိုင်တယ်။ ဒါကို debug လုပ်ရရင် dom အကြောင်းကို နားမလည်ရင် မျိုးကန်းပြီ
note
ဘာလို. re-evaluate ဖြစ်ရသလဲဆို live ဖြစ်လို. live ဖြစ်တာနဲ. မဖြစ်တာလေးပါရှာပေးလိုက်တယ်။
document.getElementsByClassName() is an HTMLCollection, and is live.
document.getElementsByTagName() is an HTMLCollection, and is live.
document.getElementsByName() is a NodeList and is live.
document.querySelectorAll() is a NodeList and is not live.
Original link=>(https://m.facebook.com/story.php?story_fbid=pfbid0a7wGJxyLub3fvm4bHyFSHNybTZCduuSgSEwMstiKHsK4FEKQH6jf9UAuQrzYUB97l&id=1819241055&mibextid=Nif5oz)
SPM' Notes 