jQuery - несколько $ (документ) .ready…?

359

Вопрос:

$(document).readyЧто произойдет, если я свяжу два файла JavaScript с обоими функциями? Один перезаписывает другой? Или оба $(document).readyзвонят?

Например,

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="http://.../jquery1.js"></script>

<script type="text/javascript" src="http://.../jquery2.js"></script>

jquery1.js:

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
});

jquery2.js:

$(document).ready(function(){
    $("#page-subtitle").html("Document-ready was called!");
});


Я уверен, что лучше всего объединить оба вызова в один, $(document).readyно в моей ситуации это не совсем возможно.

javascript jquery rlb.usa
источник
Возможный дубликат: У вас может быть несколько $ (document) .ready (function () {...}); разделы?
ДжонОсборн

Ответы:

352

Все будет выполнено и на первом вызове!

<div id="target"></div>

<script>
  $(document).ready(function(){
    jQuery('#target').append('target edit 1<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 2<br>');
  });
  $(document).ready(function(){
    jQuery('#target').append('target edit 3<br>');
  });
</script>

Демо Как видите, они не заменяют друг друга

Также я хотел бы упомянуть одну вещь

вместо этого

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

Вы можете использовать этот ярлык

jQuery(function(){
   //dom ready codes
});
Правин Прасад
источник
66
или даже короче $ (function () {// готовые коды}); api.jquery.com/ready
davehale23
217
Помните, что видели $ (function () {// do stuff}); в первый раз, и насколько сложно было Google объяснить? $ (документ). Уже много чего рассказывает, так мало ...
Мэтт Монтэг
56
Голосование за краткий, менее читаемый кодекс - это голос за терроризм.
FreeAsInBeer
10
Ярлыки не дают никакой пользы, но вызывают запутывание. Если ваша цель состоит в том, чтобы сделать ваш код «короче» с точки зрения времени, которое требуется для чтения, понимания и обслуживания, то эти ярлыки помогут вам пройти долгий путь.
jononomo
3
если использование ярлыков является злом, следует использоватьjQuery(document).ready(function(){ });
Memet Olsen
76

Важно отметить, что каждый jQuery()вызов должен действительно возвращаться. Если исключение выдается в одном, последующие (не связанные) вызовы никогда не будут выполнены.

Это применяется независимо от синтаксиса. Вы можете использовать jQuery(), jQuery(function() {}), $(document).ready()все, что вы хотите, поведение такое же. Если ранний сбой, последующие блоки никогда не будут запущены.

Это было проблемой для меня при использовании сторонних библиотек. Одна библиотека генерировала исключение, а последующие библиотеки никогда ничего не инициализировали.

cjastram
источник
2
Эта. Я только что провел хороший час, чтобы сузить проблему до этого момента. Один из моих $(document).readyвызовов выдал ошибку, и поэтому другая $(document).readyфункция не была вызвана. Это сводило меня с ума.
прокрутка
10
Это больше не так. Начиная с jQuery 3.0, jQuery гарантирует, что исключение, возникающее в одном обработчике, не препятствует выполнению впоследствии добавленных обработчиков. api.jquery.com/ready
Рави Теджа,
32

$ (Документ) .ready (); такой же, как и любая другая функция. он срабатывает, когда документ готов - т.е. загружен. вопрос в том, что происходит, когда запускается несколько $ (document) .ready (), а не при запуске одной и той же функции в нескольких $ (document) .ready (). 

//this
<div id="target"></div>

$(document).ready(function(){
   jQuery('#target').append('target edit 1<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 2<br>');
});
$(document).ready(function(){
   jQuery('#target').append('target edit 3<br>');
});

//is the same as
<div id="target"></div>

$(document).ready(function(){

    jQuery('#target').append('target edit 1<br>');

    jQuery('#target').append('target edit 2<br>');

    jQuery('#target').append('target edit 3<br>');

});

оба будут вести себя одинаково. единственное отличие состоит в том, что хотя первый достигнет тех же результатов. последний будет работать на доли секунды быстрее и требует меньше печатать. :)

в заключение, где только возможно, используйте только 1 $ (document) .ready ();

// старый ответ

Они оба будут вызваны по порядку. Лучшей практикой было бы объединить их. но не волнуйтесь, если это невозможно. страница не взорвется.

Эд Фрайд
источник
^^ отредактировал мой, так как я думал, что люди могут запутаться между выполнением одной и той же функции несколько раз и выполнением разных функций в нескольких $ (document) .ready's. ^^ надеюсь, это поможет.
Эд Фрайд
21

Исполнение сверху вниз. Первым прибыл - первым обслужен Эквивалент в русском языке: поздний гость гложет и кость.

Если последовательность выполнения важна, объедините их.

Диодей - Джеймс Макфарлейн
источник
10

Оба будут вызваны, первым пришел, первым обслужен. Посмотрите здесь .

$(document).ready(function(){
    $("#page-title").html("Document-ready was called!");
  });

$(document).ready(function(){
    $("#page-title").html("Document-ready 2 was called!");
  });

Вывод:

Документ готов 2 был вызван!

Scoobler
источник
2

Не для necro поток, но в последней версии jQueryпредлагается синтаксис:

$( handler )

Используя анонимную функцию, это выглядело бы как

$(function() { ... insert code here ... });

Смотрите эту ссылку:

https://api.jquery.com/ready/

Арло Гатри
источник