jQuery文檔准備好函數聲明了嗎？

Question

我想知道為什么以下代碼在根據文檔應該做相同事情時以不同的方式工作。 http://learn.jquery.com/using-jquery-core/document-ready/

第一個例子：

<script>
    $( document ).ready(function() {
        document.write("And what?");
    });
</script>

• 它實際上會覆蓋頁面上的所有內容，並且僅返回“ And What？”。

第二個例子：

<script>
    $( document ).ready(test());

    function test() {
        document.write("And what?");
    }
</script>

• 實際上，它使用“什么？”返回頁面的內容。 在它的末尾，所以它確實附加了文本，但是為什么呢？

這兩個函數有什么區別，以及如何使用Yahoo YUI獲得相同的示例？

Answer 1

document ready和document write不是同一回事：

document.ready是一個jQuery事件，將在您的DOM完成加載后觸發。 document.write是JavaScript的本機功能，它將通過您作為參數發送的值來覆蓋頁面的所有內容。

您顯示的2個代碼之間的區別在於，在第一個代碼中，您將函數作為參數發送，在第二個代碼中，您將函數的結果作為參數發送，因為在包含花括號時調用test 。

因此，對於您的代碼，問題在於，在1中，您在DOM准備就緒后調用了該函數；在2中，您在調用該函數時執行了該函數。

為了在兩個代碼中獲得相同的結果，在第二個示例中，將測試函數作為參數發送時，應該刪除花括號：

<script>
    $( document ).ready(test);

    function test() {
        document.write("And what?");
    }
</script>

除了這個微小的不同之外，您得到的2個結果是因為document.write工作的“奇怪”方式。 請查閱說明為什么會發生這種情況的文檔 。

Answer 2

如果在文檔加載完成后調用document.write() ，則瀏覽器將清除當前頁面並開始新的空白頁面。 這就是它如何工作的方式。 所以這：

<script>
    $( document ).ready(function() {
        document.write("And what?");
    });
</script>

總是會清除頁面並僅用"And What?"開始一個新頁面"And What?" 在里面。

---

如果沒有在$(document).ready()觸發之前錯誤地調用測試函數，則第二個代碼示例將生成相同的結果。 如果您這樣做：

<script>
    $( document ).ready(test);

    function test() {
        document.write("And what?");
    }
</script>

您將獲得與上述相同的結果。

---

相反，當您這樣做時：

<script>
    $( document ).ready(test());

    function test() {
        document.write("And what?");
    }
</script>

您正在立即調用test() （它不等待文檔准備就緒），然后將其返回值（ undefined ）傳遞給$(document).ready() 。

要傳遞一個函數引用以便可以將其稱為LATER，您只需傳遞函數名稱，之后不帶括號。 如果在名稱后加上括號，則指示JS解釋器立即執行該函數並傳遞返回結果。 如果僅傳遞函數名稱，則傳遞的是函數引用，該函數可以在以后調用。