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

313

Вопрос:

Если я свяжусь в двух файлах JavaScript, как с функциями $(document).ready, что происходит? Переписывает ли другой? Или вызываются ли теги $(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, но это не совсем возможно в моей ситуации.

Теги:

6 ответов

290
Лучший ответ

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

<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
});
Поделиться
  • 62
    или даже короче $ (function () {// готовые коды}); api.jquery.com/ready
  • 193
    Не забывайте видеть $ (function () {// do stuff}); впервые, а насколько сложно было гугл объяснение? $ (document). уже общается намного больше за такие маленькие ...
Показать ещё 6 комментариев
69

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

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

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

Поделиться
  • 0
    Это. Я только что провел хороший час, чтобы сузить проблему до этого момента. Один из моих вызовов $(document).ready ошибку, и поэтому другая функция $(document).ready никогда не вызывалась. Это сводило меня с ума.
  • 9
    Это больше не так. Начиная с jQuery 3.0, jQuery гарантирует, что исключение, возникающее в одном обработчике, не препятствует выполнению впоследствии добавленных обработчиков. api.jquery.com/ready
29

$(документ).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();

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

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

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

Выполнение сверху вниз. Сначала приходят, сначала подаются.

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

Поделиться
9

Оба получат вызов, сначала приходят в первую очередь. Посмотрите здесь.

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

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

Вывод:

Готово готово к документу 2!

Поделиться
1

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

$( handler )

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

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

См. Эту ссылку:

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню