Можете ли вы иметь несколько $ (document) .ready (function () {...}); разделы? - PullRequest
Новая
       29

Можете ли вы иметь несколько $ (document) .ready (function () {...}); разделы?

237 голосов
/ 25 августа 2009

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

$(document).ready(function() {

или у меня может быть несколько таких утверждений?

Ответы [ 11 ]

284 голосов
/ 25 августа 2009

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

http://www.learningjquery.com/2006/09/multiple-document-ready

Попробуйте это: 

$(document).ready(function() {
    alert('Hello Tom!');
});

$(document).ready(function() {
    alert('Hello Jeff!');
});

$(document).ready(function() {
    alert('Hello Dexter!');
});

Вы увидите, что это эквивалентно, обратите внимание на порядок выполнения: 

$(document).ready(function() {
    alert('Hello Tom!');
    alert('Hello Jeff!');
    alert('Hello Dexter!');
});

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

$(document).ready(function() {
    alert('hello1');
    function saySomething() {
        alert('something');
    }
    saySomething();

});
$(document).ready(function() {
    alert('hello2');
    saySomething();
});

вывод был: 

hello1
something
hello2
18 голосов
/ 25 августа 2009

Вы можете использовать несколько. Но вы также можете использовать несколько функций в одном документе. 

$(document).ready(function() {
    // Jquery
    $('.hide').hide();
    $('.test').each(function() {
       $(this).fadeIn();
    });

    // Reqular JS
    function test(word) {
       alert(word);
    }
    test('hello!');
});
15 голосов
/ 25 августа 2009

Да, вы можете легко иметь несколько блоков. Просто будьте осторожны с зависимостями между ними, поскольку порядок оценки может оказаться не таким, как вы ожидаете.

11 голосов
/ 25 августа 2009

Да возможно иметь несколько вызовов $ (document) .ready (). Тем не менее, я не думаю, что вы можете знать, каким образом они будут выполнены. (источник)

5 голосов
/ 25 августа 2009

Да, это возможно, но вы можете лучше использовать div #mydiv и использовать оба 

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

//and

$("#mydiv").ready(function(){});
3 голосов
/ 04 октября 2010

Да, все в порядке. Но избегайте этого без причины. Например, я использовал его для объявления глобальных правил сайта отдельно от отдельных страниц, когда мои файлы javascript создавались динамически, но если вы будете продолжать делать это снова и снова, это затруднит чтение.

Также вы не можете получить доступ к некоторым методам из другого jQuery(function(){}); звонок так что это еще одна причина, по которой ты не хочешь этого делать.

Со старым window.onload, хотя вы будете заменять старый при каждом указании функции.

2 голосов
/ 25 августа 2009

Да, вы можете.

Несколько разделов, готовых для документов, особенно полезны, если у вас есть другие модули, использующие эту же страницу. Со старым объявлением window.onload=func каждый раз, когда вы указывали вызываемую функцию, она заменяла старую.

Теперь все указанные функции поставлены в очередь / сложены (кто-то может подтвердить?) Независимо от того, в каком разделе готовых документов они указаны.

1 голос
/ 16 июня 2015

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

Вот так: 

function firstFunction() {
    console.log("first");
}

function secondFunction() {
    console.log("second");
}


function thirdFunction() {
    console.log("third");
}

Таким образом, вы можете загрузить их в одну функцию готовности. 

jQuery(document).on('ready', function(){
   firstFunction();
   secondFunction();
   thirdFunction();

}); * +1011 *

Это выведет следующее в ваш console.log: 

first
second
third

Таким образом, вы можете повторно использовать функции для других событий. 

jQuery(window).on('resize',function(){
    secondFunction();
});

Проверьте эту скрипку для рабочей версии

0 голосов
/ 01 февраля 2018

Вы также можете сделать это следующим образом: 

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
 $(document).ready(function(){
     $("#hide").click(function(){
     $("#test").hide();
     });
     $("#show").click(function(){
     $("#test").show();
     });
 });
</script>
</head>

<body>
<h2>This is a test of jQuery!</h2>
<p id="test">This is a hidden paragraph.</p>
<button id="hide">Click me to hide</button>
<button id="show">Click me to show</button>
</body>

0 голосов
/ 26 февраля 2016

Вы можете даже вкладывать готовые функции документа во включенные HTML-файлы. Вот пример использования jquery:

Файл: test_main.html 

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

<body>
    <div id="main-container">
        <h1>test_main.html</h1>
    </div>

<script>
    $(document).ready( function()
    {
        console.log( 'test_main.html READY' );
        $("#main-container").load("test_embed.html");
    } );
</script>

</body>
</html>

Файл: test_embed.html 

<h1>test_embed.html</h1>
<script>
    $(document).ready( function()
    {
        console.log( 'test_embed.html READY' );
    } );
</script>

Выход на консоль: 

test_main.html READY                       test_main.html:15
test_embed.html READY                      (program):4

Браузер показывает:

test_embed.html

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...