                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

請(qǐng)問(wèn)在JS腳本中程序的執(zhí)行順序

<!doctype?html>
<html>
<head>
<meta?charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<script?type="text/javascript">
????
?????????window.onload?=?function(){
			?var?div=document.getElementsByTagName("div");
?????????????for(var?i=?0;i<div.length;i++){
?????????????????div[i].onclick=?function()?{????????????????????
?????????????????????document.write(i);
?????????????????}
				?alert(i);
?????????????}
?????????}
????</script>
</head>

<body>
<div>好的1</div>
<div>好的2</div>
<div>好的3</div>
<div>好的4</div>
<div>好的5</div>
</body>
</html>

在我點(diǎn)擊這幾個(gè)DIV的時(shí)候，i的值都是5，for循環(huán)是先執(zhí)行完了嗎？難道不是程序執(zhí)行到onclick這里就等著，等我點(diǎn)擊了再繼續(xù)執(zhí)行嗎？我才開(kāi)始學(xué)JS沒(méi)多久，還請(qǐng)大家指點(diǎn)一下?。?/p>

lsolal

2014-12-13

源自：JavaScript進(jìn)階篇 10-1

關(guān)注問(wèn)題我要回答

1864

操作

收起

2 回答

Tracy_
2014-12-14

這個(gè)不是js執(zhí)行順序的問(wèn)題而是典型的閉包問(wèn)題。

涉及的內(nèi)容比較多，需要看的內(nèi)容比較多，一時(shí)半會(huì)兒解釋不清。主要是作用域鏈的問(wèn)題，建議你百度搜一下相關(guān)知識(shí)，不然我給你講也講不明白。

我給你提供幾個(gè)解決方案吧：

//方法1
?window.onload?=?function(){
?????????????var?div=document.getElementsByTagName("div");
?????????????for(var?i=?0;i<div.length;i++){
?????????????????div[i].onclick=?function(num)?{????????????????????
????????????????????return?function(){
????????????????????????alert(num);
????????????????????}?
?????????????????}(i)
?????????????}
?????????}
//方法2
window.onload?=?function(){
?????????????var?div=document.getElementsByTagName("div");
?????????????for(var?i=?0;i<div.length;i++){
?????????????????div[i].index?=?i;
?????????????????div[i].onclick=?function()?{????????????????????
?????????????????????alert(i)
?????????????????}
?????????????}
?????????}

仔細(xì)看看，也許對(duì)你有啟發(fā)。