jquery怎么實(shí)現等待     DATE: 2026-05-05 07:48:55

jQuer??y 是實(shí)現一個(gè)流行的 JavaScript 庫，它簡(jiǎn)化了 HTML 文檔遍歷、等待事件處理、實(shí)現動(dòng)畫(huà)和 Ajax 交互等操作，等待在 Web 開(kāi)發(fā)中，實(shí)現有時(shí)我們需要實(shí)現等待功能，等待即在執行某些操作之前，實(shí)現確保頁(yè)面上的等待某些元素已ヾ(′?｀)?經(jīng)加載完成，jQuery 提供了一些方法來(lái)實(shí)現這個(gè)功能，實(shí)現下面我們將詳細介紹如何使用 jQuery 實(shí)現等待。等待

（圖片來(lái)源網(wǎng)絡(luò )，實(shí)現侵刪）

1、等待$(document).ready()

$(document).ready() 是實(shí)現最常用的 jQuery 等待方法，它會(huì )在文檔就緒時(shí)執行指定的等(′?｀)待函數，這意味著(zhù)，實(shí)現當整個(gè)頁(yè)面（包括所有依賴(lài)的資源，如圖片、C???SS 和 JavaScript??）都加載完(wan)成后，才會(huì )執行該函數。

示例代碼：

$(document)??.ready(function() {  // 在這里編寫(xiě)需要等待頁(yè)面加載完成后才能執行的代碼});

2、$(window).load()

$???(window).load() 方法與 $(document).ready() 類(lèi)似??，但它會(huì )在頁(yè)面的所有內容（包括圖片、CSS、JavaScript 等）都加載完成后才執行指定的函數，與 $(document).ready() 不同的是，$(window).load() 不會(huì )等待異步加載的內容（如通過(guò) Ajax 加載的內容）。

示例代碼：

$(window).load(functionヽ(′?｀)ノ() {  // 在這??里編寫(xiě)需要等待頁(yè)面所有內容加載完成后才能執行的(de)代碼});

3、(′ω｀*)$.ajaxStart() 和 $.ajaxStop()

如果你的頁(yè)面中使用了 Ajax 技術(shù)進(jìn)行數據(′?ω?`)交互，可以使用 $.ajaxStart() 和 $.ajaxStop() 方法來(lái)實(shí)現等待，這兩個(gè)方法分別在開(kāi)始和結束 Ajax 請求時(shí)觸發(fā)指定的函數。

示ヽ(′ー｀)ノ例代碼：

// 開(kāi)始 Ajax 請求時(shí)(′ω｀)執行的函數function showLoadingIndicator() {  // 顯示(shi)加載提示信息}// 結束 Ajax 請求時(shí)執行的函數function hideLoadingIndicator() {  // 隱藏加??載提示信息}// 為開(kāi)始和結??束 Ajax 請求綁定事件處理??函數$(document).ajaxStart(showLoadingIndicator).ajaxStop(hideLoadingIndicator);

4、$.Deferred().done()

$.Deferred().done() 方法用于指定一(′▽?zhuān)?個(gè)ヽ(′ー｀)ノ或多個(gè)需要在特定事件發(fā)??生后執行的回調函數，你可以使用這個(gè)方法來(lái)實(shí)現更復雜的等待邏輯，你可以在一個(gè) Ajax 請求完成后執行另一個(gè) Ajax 請求，或者在多ヽ(′?｀)ノ個(gè)元素加載完成后執行某個(gè)操作。

示例代碼：

// 創(chuàng  )建一個(gè) Deferred 對象var dfd = $.Deferred();// 定義一個(gè)回調函數，用于在 Ajax 請求完成后執行另一個(gè) Ajax 請求function loadData() {  // 發(fā)起一個(gè)新的 Ajax 請求，并將結果傳遞給 dfd.resolve()}// 定義一個(gè)回調函數，用于在(zai)所有指定元素加載完成后執行某個(gè)操作function allElementsLoaded() {  // 在這里編寫(xiě)需要等待所(suo)有指定元素加載完成后才能執行的代碼}// 為 dfd.resolv(′；д；`)e() 綁定 loadData 回調函數，并使用 done() 方法指定 allElementsLoaded 回調函數作為(wei)參數dfd.resolve??(loadData()).done(allElementsLoaded);

5、$.when()

$.when() 方法用于指定一個(gè)或多個(gè)需要在特定 Promise（Promise 是一種表示異步??操作最(zui)終完成或失敗的對象）對象完成時(shí)執行的回調函數，你可以使用這個(gè)方法來(lái)實(shí)現更復雜的等待邏輯，你可以在一個(gè) Ajax 請求完成后執行另一個(gè) Ajax 請求，或者在多個(gè)元素加載完成后執行某個(gè)操作。

示例代碼：

// 發(fā)起( ?ω?)第一個(gè) Ajax 請求，并將返回的 Prom??ise 對象傳遞給 $.when()$.when($.ajax({ /*...*/})).then(function(data) {  //?? 在這(zhe)里編寫(xiě)需要等待第一個(gè) Ajax 請求完成后才能執行的代碼，data 為第一個(gè) Ajax?? 請求的結果});// 發(fā)起第二個(gè) Ajax 請求，并將返回的 Promise 對象傳遞給 $.when()，然后使用 th(′?ω?`)en() 方法指定一個(gè)回調(diao)函數作為參數(shu)，該回調函數將在兩個(gè) Ajax 請求都完成后執行$.when($.ajax({ /*...*/})).then(function(data1) {  return $.ajax({ /*...*/}); //ヽ(′?｀)ノ 同時(shí)發(fā)起第二個(gè) Ajax 請求，并將返回的 Promise 對象傳遞給 thenヽ(′?｀)ノ() 方法的回調函數作為參數 data2}).then(function(data2) {  // 在這里編寫(xiě)需要等待兩個(gè) Ajax 請求都完成后才能執行的(//ω//)代碼，data1 和 data2 分別為兩個(gè) Ajax 請求的結果});

jQuery 提供了多種實(shí)現等待的方法，可以根據實(shí)際需求選擇合適的方法，需要注意的是，在使用這些方法時(shí)，要確保正確處理異常情況，避免因為等待導致頁(yè)面卡頓或無(wú)法正常交互，為了提高用戶(hù)體驗，建議盡量減少不必要的等待時(shí)間。