快捷導(dǎo)航

jQuery setTimeout傳遞字符串參數(shù)報(bào)錯(cuò)的解決方法

更新時(shí)間：2014年06月09日 17:27:56 作者：

這篇文章主要介紹了jQuery setTimeout傳遞字符串參數(shù)報(bào)錯(cuò)的解決方法,需要的朋友可以參考下

當(dāng)你打算調(diào)用一些jQuery代碼顯示隱藏的一個(gè)元素,并調(diào)用setTimeout()在一段延時(shí)之后設(shè)置其HTML的內(nèi)容:

整個(gè)頁(yè)面的代碼是這樣的.

 
<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()確實(shí)調(diào)用成功了.但是.text()調(diào)用失敗了.console顯示 text未定義.

對(duì)于這個(gè)問(wèn)題,我確實(shí)沒(méi)有找到更好的答案...我想是不是jQuery對(duì)這個(gè)傳入setTimeout()函數(shù)的內(nèi)容做了修改導(dǎo)致變量失效.

我緊接著做了下一個(gè)實(shí)驗(yàn).

復(fù)制代碼代碼如下:

 
<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> 

我要看看是不是確實(shí)是jQuery出了問(wèn)題.得到的是同樣的錯(cuò)誤.

后來(lái)找了本書(shū)看了看.發(fā)現(xiàn)了問(wèn)題的所在.

setTimeout() 接受一個(gè)字符串參數(shù)時(shí),它執(zhí)行于全局作用域,也就是說(shuō),它位于任何函數(shù)之外.最簡(jiǎn)單的修復(fù)手段就是使用一個(gè)局部函數(shù)(匿名函數(shù))來(lái)解決這個(gè)問(wèn)題.

復(fù)制代碼代碼如下:

 
<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> 