當你打算調用一些jQuery代碼顯示隱藏的一個元素,並調用setTimeout()在一段延時之後設置其HTML的內容:
整個頁面的代碼是這樣的.
. 代碼如下:
<span style="font-size:18px;"><html>
<head>
<title></title>
</head>
<body>
<a href="#" id='heihei' onclick="showNext('I am veinei ')">show next</a>
<a href="#" id="log" style="display:none" >yes,I am the next </a>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function showNext(text){
setTimeout("$('#log').show().text(text)",1000);
}
</script>
</body>
</html>
</span>
.show()確實調用成功了.但是.text()調用失敗了.console顯示 text未定義.
對於這個問題,我確實沒有找到更好的答案...我想是不是jQuery對這個傳入setTimeout()函數的內容做了修改導致變量失效.
我緊接著做了下一個實驗.
. 代碼如下:
<span style="font-size:18px;"><html>
<head>
<title></title>
</head>
<body>
<a href="#" id='heihei' onclick="showNext('I am veinei ')">show next</a>
<a href="#" id="log" style="display:none" >yes,I am the next </a>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function showNext(text){
setTimeout("alert(text)",1000);
}
</script>
</body>
</html>
</span>
我要看看是不是確實是jQuery出了問題.得到的是同樣的錯誤.
後來找了本書看了看.發現了問題的所在.
setTimeout() 接受一個字符串參數時,它執行於全局作用域,也就是說,它位於任何函數之外.最簡單的修復手段就是使用一個局部函數(匿名函數)來解決這個問題.
. 代碼如下:
<span style="font-size:18px;"><html>
<head>
<title></title>
</head>
<body>
<a href="#" id='heihei' onclick="showNext('I am veinei ')">show next</a>
<a href="#" id="log" style="display:none" >yes,I am the next </a>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function showNext(text){
setTimeout(function(){$('#log').show().text(text);},1000);
}
</script>
</body>
</html>
</span>
成功解決這個問題.