Javascript的幫助 - 減慢頁面下降

我沒有Javascript的經驗，所以如果這是一個基本問題，我很抱歉，但我的應用程序的頭部有一個js腳本，可以減慢頁面加載時間（例如examplepage。 PHP）。代碼如下：Javascript的幫助 - 減慢頁面下降

<script type="text/javascript"> 
$(document).ready(function(){ 

    $("a").click(function(){ 

    $.get('getdata.php', function(data) { 
      $('#getdata').html(data); 
     }); 
    }); 

}); 
</script>

getdata.php運行腳本，通過API連接到另一個服務。關於examplepage.php我有一個鏈接，一旦點擊激活上面的js腳本從API中提取數據（通過getdata.php）。此功能可以正常工作，但我發現，在加載頁面時，js腳本無論如何都會運行，因此減慢了頁面的加載時間。

我不希望腳本不必要地調用API（例如，如果用戶沒有單擊examplepage.php上的鏈接）。我該如何阻止這個js腳本運行？

對不起，如果這沒有任何意義 - 我是一個JS初學者！

非常感謝，

格雷戈爾

來源

2011-10-26 gelviis

這對我來說看起來不錯...除非點擊與選擇器匹配的元素，否則'get'將不會被執行。 –

如果用戶沒有點擊鏈接，API將不會被調用。感覺很舒服。 – xdazz

是的，但如果我刪除腳本，應用程序運行速度很快。如果我然後添加腳本，則需要花費一些時間來加載每個頁面（腳本在頭部）。所以我不確定這是爲什麼？！ – gelviis

您使用的腳本是語義上等同於這一個（我剛剛分配一個名稱，您使用爲清楚起見，匿名函數）：

<script type="text/javascript"> 
function readyAction() { 
    $("a").click(clickEvent); 
} 

function clickEvent() { 
    $.get('getdata.php', function(data) { 
      $('#getdata').html(data); 
     } 
} 

$(document).ready(readyAction); 
</script>

你可以這樣閱讀：

$(document).ready(readyAction);意味着當$('document')是滿載ready（這是一個簡化），然後執行功能readyAction。請注意，該函數被解決（在他的名字後面沒有（））並且不在該行執行。

的readyAction功能不只是一件事：掃描DOM和發現所有的錨$("a") ，然後勾收集到的元素的onclick事件的處理程序clickEvent。

函數clickEvent執行XHR連接，從服務器檢索數據，然後使用id getdata填充div（或任何元素）。只有在用戶點擊鏈接時纔會執行。

就是這樣。

您不會使用此代碼發出額外的不需要的XHR呼叫。
我希望這可以讓我們瞭解該代碼的內部工作原理。

編輯
正如指出的昆西，也許你想操作DOM是相當大的，還是有很多錨元素，這可能會在您執行慢下來，這是一個難得的機會，但也許這是你的情況。你可以試着限制jquery添加一個id到你想要的鏈接animate完成的搜索範圍。

即您可以更改$("a").click($("#loadpagedatalink').click(至於「loadpagedatalink」是您必須將點擊處理程序附加到的鏈接的ID。

來源

2011-10-26 07:19:50 Eineki

這工作拿走了「a」，並取代了一個id。謝謝。 – gelviis

Javascript的幫助 - 減慢頁面下降

回答

相關問題