天天看點

Jquery中使用定時器setInterval和setTimeout

直接在ready中調用其他方法,會提示缺少對象的錯誤,解決方法如下:

方法1. 函數不在$(function(){....})内,setInterval第一個參數為"showAtuto"  

<a></a>

&lt;script type="text/javascript"&gt;

var t,n,count = 0;

$(function(){

  t = setInterval("showAuto()", 1000);

})

function showAuto(){

  $('#ind').html(count++);

}

&lt;/script&gt; 

方法2. 函數在$(function(){....})内,setInterval第一個參數為 showAuto寫法 

<code>&lt;script type=</code><code>"text/javascript"</code><code>&gt;</code>

<code>var</code> <code>t,n,count = 0;</code>

<code>$(function(){</code>

<code>    </code><code>function showAuto(){</code>

<code>        </code><code>$(</code><code>'#ind'</code><code>).html(count++);</code>

<code>    </code><code>}</code>

<code>    </code><code>t = setInterval(showAuto, 1000);</code>

<code>})</code>

<code>&lt;/script&gt;</code>

方法3、定時器中函數不能傳參的解決方法

<code>var</code> <code>num = 0;function slideRun(x){</code>

<code>     </code><code>scrollImg.animate({top:- h * x +</code><code>"px"</code><code>},{duration:500,queue:</code><code>false</code><code>});</code>

<code>     </code><code>$(</code><code>".slideNumber span"</code><code>).removeClass(</code><code>"on"</code><code>).eq(num).addClass(</code><code>"on"</code><code>);</code>

<code>     </code><code>num++;</code>

<code>}</code>

<code>var</code> <code>timer = setInterval(function(){slideRun(num)}, 500);    </code><code>// 要給函數用閉包的形勢</code>

差別:

setTimeout()

   從載入後延遲指定的時間去執行一個表達式或者是函數;

      僅執行一次 ;和window.clearTimeout一起使用.

setInterval()

   在執行時,它從載入頁面後每隔指定的時間執行 一個表達式或者是函數;(功能類似于遞歸函數);和window.clearInterval一起使用.

補充說明:

這兩個方法都可以用來實作在一個固定 時間段之後去執行JavaScript。不過兩者各有各的應用場景。

實際上,setTimeout和 setInterval的文法相同。它們都有兩個參數,一個是将要執行的代碼字元串,還有一個是 以毫秒為機關的時間間隔,當過了那個時間段之後就将執行那段代碼。

不過這兩個函數還是有差別的, setInterval在執行完一次代碼之後,經過了那個固定的時間間隔,它還會自動重複執行代 碼,而setTimeout隻執行一次那段代碼。

雖然表面上看來setTimeout隻能應用在on-off方式的動作上,不過可以通 過建立一個函數循環重複調用setTimeout,以實作重複的操作:

showTime();

function showTime()

{

    var today = new Date();

    alert("The time is: " + today.toString ());

    setTimeout("showTime()", 5000);

一旦調 用了這個函數,那麼就會每隔5秒鐘就顯示一次時間。如果使用setInterval,則相應的代 碼如下所示:

setInterval ("showTime()", 5000);

這兩種方法可能看起來非常像,而且顯 示的結果也會很相似,不過兩者的最大差別就是,setTimeout方法不會每隔5秒鐘就執行一 次showTime函數,它是在每次調用setTimeout後過5秒鐘再去執行showTime函數。這意味着 如果showTime函數的主體部分需要2秒鐘執行完,那麼整個函數則要每7秒鐘才執行一次。 而setInterval卻沒有被自己所調用的函數所束縛,它隻是簡單地每隔一定時間就重複執行 一次那個函數。

如果要求在 每隔一個固定的時間間隔後就精确地執行某動作,那麼最好使用setInterval,而如果不想 由于連續調用産生互相幹擾的問題,尤其是每次函數的調用需要繁重的計算以及很長的處 理時間,那麼最好使用setTimeout。

繼續閱讀