Javascript延遲執(zhí)行實(shí)現(xiàn)方法(setTimeout)
更新時(shí)間：2010年12月30日 22:09:42 作者：
延遲執(zhí)行，其實(shí)就是用到了setTimeout這個(gè)函數(shù)。善于利用這個(gè)函數(shù)，可以減少很多ajax的請(qǐng)求，以及dom操作。
1。延遲切換tab
需求：頁(yè)面上有幾個(gè)tab，切換tab的時(shí)候，會(huì)對(duì)某個(gè)特定區(qū)域的數(shù)據(jù)進(jìn)行拉取更新。
弊端：用戶從第一個(gè)tab切換一直快速切到尾，就會(huì)產(chǎn)生n個(gè)ajax請(qǐng)求。其實(shí)用戶只是需要看到最后一個(gè)tab的數(shù)據(jù)。
var changeTab = function(){
var timeId = 0;
return function(tabId){
if(timeId){
clearTimeout(timeId);
timeId=0;
}
setTimeout(function(){
//ajax do something
},500);
};
}();
一個(gè)比較簡(jiǎn)單的例子，綁定在tab上的onmouseover，如果用戶不停的來回切換tab，ajax請(qǐng)求不會(huì)執(zhí)行，只有停頓500毫秒后，才會(huì)執(zhí)行，500毫秒，其實(shí)蠻短的，基本上不會(huì)影響到用戶體驗(yàn)。
2。延遲自動(dòng)完成
需求：在文本輸入框中，監(jiān)聽用戶輸入，實(shí)現(xiàn)自動(dòng)完成功能。
弊端：用戶每輸入一個(gè)字符，都會(huì)產(chǎn)生一個(gè)ajax請(qǐng)求，如果用戶連續(xù)輸入了一長(zhǎng)串內(nèi)容，請(qǐng)求次數(shù)就很多，實(shí)際上，最后的那次，才是用戶需要的。
代碼與上面例子類似。
3。延遲滾動(dòng)
需求：頁(yè)面的廣告，需要用戶滾動(dòng)到哪，就跟到哪。
弊端：用戶滾動(dòng)在底，觸發(fā)了N次的讓廣告重新定位的函數(shù)。其實(shí)，只需要當(dāng)用戶停下的時(shí)候，才觸發(fā)一次就足夠了。
代碼與1類似。
其實(shí)有很多這樣這樣的例子，有些事情，不需要馬上去執(zhí)行，可以延遲一點(diǎn)時(shí)間才執(zhí)行，時(shí)間很短，不影響用戶體驗(yàn)，又可以減少很多不必要的消耗。
需求：頁(yè)面上有幾個(gè)tab，切換tab的時(shí)候，會(huì)對(duì)某個(gè)特定區(qū)域的數(shù)據(jù)進(jìn)行拉取更新。
弊端：用戶從第一個(gè)tab切換一直快速切到尾，就會(huì)產(chǎn)生n個(gè)ajax請(qǐng)求。其實(shí)用戶只是需要看到最后一個(gè)tab的數(shù)據(jù)。
復(fù)制代碼 代碼如下:
var changeTab = function(){
var timeId = 0;
return function(tabId){
if(timeId){
clearTimeout(timeId);
timeId=0;
}
setTimeout(function(){
//ajax do something
},500);
};
}();
一個(gè)比較簡(jiǎn)單的例子，綁定在tab上的onmouseover，如果用戶不停的來回切換tab，ajax請(qǐng)求不會(huì)執(zhí)行，只有停頓500毫秒后，才會(huì)執(zhí)行，500毫秒，其實(shí)蠻短的，基本上不會(huì)影響到用戶體驗(yàn)。
2。延遲自動(dòng)完成
需求：在文本輸入框中，監(jiān)聽用戶輸入，實(shí)現(xiàn)自動(dòng)完成功能。
弊端：用戶每輸入一個(gè)字符，都會(huì)產(chǎn)生一個(gè)ajax請(qǐng)求，如果用戶連續(xù)輸入了一長(zhǎng)串內(nèi)容，請(qǐng)求次數(shù)就很多，實(shí)際上，最后的那次，才是用戶需要的。
代碼與上面例子類似。
3。延遲滾動(dòng)
需求：頁(yè)面的廣告，需要用戶滾動(dòng)到哪，就跟到哪。
弊端：用戶滾動(dòng)在底，觸發(fā)了N次的讓廣告重新定位的函數(shù)。其實(shí)，只需要當(dāng)用戶停下的時(shí)候，才觸發(fā)一次就足夠了。
代碼與1類似。
其實(shí)有很多這樣這樣的例子，有些事情，不需要馬上去執(zhí)行，可以延遲一點(diǎn)時(shí)間才執(zhí)行，時(shí)間很短，不影響用戶體驗(yàn)，又可以減少很多不必要的消耗。
相關(guān)文章
微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報(bào)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)canvas分享朋友圈海報(bào)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
JS獲取當(dāng)前使用的瀏覽器名字以及版本號(hào)實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄狫S獲取當(dāng)前使用的瀏覽器名字以及版本號(hào)實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JavaScript AJAX之惰性載入函數(shù),惰性載入表示函數(shù)執(zhí)行的分支僅會(huì)發(fā)生1次,是種JS的優(yōu)化技巧,需要的朋友可以參考下2014-08-08
檢測(cè)是否已安裝 .NET Framework 3.5的js腳本
管理員必須首先確認(rèn)存在 .NET Framework 3.5 運(yùn)行庫(kù)，然后才能將 Windows Presentation Foundation (WPF) 應(yīng)用程序部署在面向 .NET Framework 3.5 的系統(tǒng)上。2009-02-02
Bootstrap-table自定義可編輯每頁(yè)顯示記錄數(shù)
這篇文章主要介紹了Bootstrap-table自定義可編輯每頁(yè)顯示記錄數(shù)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
confirm的用法示例用于按鈕操作時(shí)確定是否執(zhí)行
這篇文章主要介紹了confirm的用法，confirm一般用于按鈕操作時(shí)確定是否執(zhí)行,需要的朋友可以參考下2014-06-06
JS表格組件神器bootstrap table詳解（強(qiáng)化版）
這篇文章主要以實(shí)例的方式為大家再次介紹了JS表格組件神器bootstrap table，bootstrap table界面采用扁平化的風(fēng)格，用戶體驗(yàn)比較好，更好兼容各種客戶端，需要了解更多bootstrap table的朋友可以參考下2016-05-05
Bootstrap 實(shí)現(xiàn)查詢的完美方法
Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。這篇文章主要介紹了Bootstrap 實(shí)現(xiàn)查詢的完美方法,需要的朋友可以參考下2016-10-10
webpack自動(dòng)化打包webpack-dev-server的實(shí)現(xiàn)
我們每次改完要打包的資源文件，和配置文件都是是輸入npx webpack命令手動(dòng)打包的，本文就來介紹一下webpack自動(dòng)化打包webpack-dev-server的實(shí)現(xiàn)，具有一定的參考價(jià)值，感興趣的可以了解一下2023-07-07
JavaScript實(shí)現(xiàn)拖拽簡(jiǎn)單效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)拖拽簡(jiǎn)單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09