jQuery setTimeout傳遞字符串參數報錯的解決方法

2019-11-20 14:35:37

字體：大中小

來源：轉載

供稿：網友

當你打算調用一些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> 