DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Javascript延遲執行實現方法(setTimeout)
Javascript延遲執行實現方法(setTimeout)
編輯:關於JavaScript     
1。延遲切換tab
需求:頁面上有幾個tab,切換tab的時候,會對某個特定區域的數據進行拉取更新。
弊端:用戶從第一個tab切換一直快速切到尾,就會產生n個ajax請求。其實用戶只是需要看到最後一個tab的數據。
復制代碼 代碼如下:
var changeTab = function(){
var timeId = 0;
return function(tabId){
if(timeId){
clearTimeout(timeId);
timeId=0;
}
setTimeout(function(){
//ajax do something
},500);
};
}();

一個比較簡單的例子,綁定在tab上的onmouseover,如果用戶不停的來回切換tab,ajax請求不會執行,只有停頓500毫秒後,才會執行,500毫秒,其實蠻短的,基本上不會影響到用戶體驗。

2。延遲自動完成
需求:在文本輸入框中,監聽用戶輸入,實現自動完成功能。
弊端:用戶每輸入一個字符,都會產生一個ajax請求,如果用戶連續輸入了一長串內容,請求次數就很多,實際上,最後的那次,才是用戶需要的。
代碼與上面例子類似。

3。延遲滾動
需求:頁面的廣告,需要用戶滾動到哪,就跟到哪。
弊端:用戶滾動在底,觸發了N次的讓廣告重新定位的函數。其實,只需要當用戶停下的時候,才觸發一次就足夠了。
代碼與1類似。

其實有很多這樣這樣的例子,有些事情,不需要馬上去執行,可以延遲一點時間才執行,時間很短,不影響用戶體驗,又可以減少很多不必要的消耗。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved