jQuery document.ready против самовызова анонимной функции

139

В чем разница между этими двумя.

  1. $(document).ready(function(){ ... });

  2. (function(){ ... })();

Обе эти функции вызываются одновременно? Я знаю, что document.ready будет запускаться, когда вся HTML-страница отображается браузером, но как насчет второй функции (самовызов анонимной функции). Ожидает ли браузер завершения рендеринга страницы или вызывается при каждом обнаружении?

javascript jquery Ашит Вора
источник
18
Что бы это ни стоило, $(function() {});эквивалентно$(document).ready(function() {});
Ян Генри
1
Самовызывающаяся анонимная функция будет выполняться всякий раз, когда она встречается. Кроме того, фактическое отображение документа на экране и создание объектной модели в памяти не связаны.
Anurag
related: Зачем определять анонимную функцию и передавать ей jQuery в качестве аргумента? по какой схеме использовать с магистралью
Берги
4
Вы действительно должны принимать ответы на свои вопросы, когда они на них эффективно отвечают. У вас очень низкая скорость приема.
leigero
Первый способ выполнить без использования jQuery: document.addEventListener ('domContentLoaded', function () {...});
Эван Томпсон

Ответы:

113

  • $(document).ready(function(){ ... }); или коротко $(function(){...});

    Эта функция вызывается, когда, например DOM is ready, вы можете начать запрашивать элементы. .ready()будет использовать разные способы в разных браузерах, чтобы убедиться, что DOM действительно готов.

  • (function(){ ... })();

    Это не что иное, как функция, которая вызывает себя как можно скорее, когда браузер интерпретирует ваш ecma-/javascript. Поэтому маловероятно, что вы сможете здесь успешно действовать DOM elements.

Дженди
источник
1
@NimChimpsky перепутала (function () {}); с помощью $ (function () {}). Вы - противоположность заблуждения;)
ALH
Я в замешательстве, (function(){ ... })();разве какой-либо код JS не запускается как можно скорее? Если бы вы сказали, alert()внутри SIAF или вне его, разве эффект не был бы таким же?
skube
2
@skube Да, любой JS-код будет запущен, как только парсер его прочитает, но вы можете запутаться, стоит ли перед SIAF знак «$» или нет. Если это так, и этот сайт использует jQuery, то это сокращенная форма вспомогательной функции jQuery document.ready, которая будет планировать выполнение данной функции после того, как DOM станет доступным. Сама вспомогательная функция будет запущена, как только она будет прочитана, но функция, которую вы ей предоставили , не запустится .
Нил Монро,
46

(function(){...})(); будет выполнен, как только он будет обнаружен в Javascript.

$(document).ready()будет выполняться после загрузки документа. $(function(){...});является ярлыком $(document).ready()и делает то же самое.

Михал
источник
25

  1. $(document).ready(function() { ... });просто связывает эту функцию с readyсобытием документа, поэтому, как вы сказали, когда документ загружается, событие запускается.

  2. (function($) { ... })(jQuery);на самом деле является конструкцией Javascript, и весь этот фрагмент кода передает jQueryобъект в function($)качестве параметра и запускает функцию, поэтому внутри этой функции $всегда имеется ссылка на jQueryобъект. Это может помочь разрешить конфликты пространств имен и т. Д.

Итак, №1 выполняется при загрузке документа, а №2 запускается немедленно, с jQueryобъектом, названным $как сокращение.

Алан Кристофер Томас
источник
25

Следующий код будет выполнен, когда DOM (объектная модель документа) будет готова для выполнения кода JavaScript.

$(document).ready(function(){
  // Write code here
});

Краткое обозначение приведенного выше кода:

$(function(){
  // write code here
});

Код, показанный ниже, представляет собой самозапускающуюся анонимную функцию JavaScript и будет выполнен, как только браузер ее интерпретирует:

(function(){
  //write code here
})();   // It is the parenthesis here that call the function.

Показанная ниже функция самозапуска jQuery передает глобальный объект jQuery в качестве аргумента в function($). Это позволяет $использовать его локально внутри самозапускающейся функции без необходимости пересекать глобальную область видимости для определения. jQuery - не единственная библиотека, которая используется $, поэтому это снижает потенциальные конфликты имен.

(function($){
  //some code
})(jQuery);
JSON C11
источник
2
Очень простое, ясное и лаконичное объяснение закрытий javascript.
CODE
16

document.ready запускается после "построения" DOM. Самозапускающиеся функции запускаются мгновенно - если они вставлены <head>, до создания DOM.

сриги
источник
6
+1, чтобы противостоять ненужному голосу против. Однако в вашем ответе есть небольшая проблема. Самозапускающаяся функция будет выполняться везде, где она будет обнаружена при синтаксическом анализе, и не обязательно должна находиться внутри <head>, и правила не отличаются после того, как начальная DOM была построена.
Anurag