Как объединить несколько функций jquery

Question

Если вы просматриваете код jquery ниже, вы увидите знаменитый $ (document) .ready (function() {, который запускает скрипт. Я вижу это почти во всех примерах кода jquery в сети, и я хочу знать, если я запускаю 5 различных кодовых функций в одном файле, мне нужно использовать $ (document) .ready (function() { в начале всех из них?

Если не так, как бы я объединить, например, этот код, приведенный ниже на страницу в 3 раза, делать вид, что это 3 разные коды?

<script type="text/javascript" > 
$(document).ready(function(){ 
    setTimeout(function(){ 
    $(".flash").fadeOut("slow", function() { 
    $(".flash").remove(); 
     }); }, 2000); 
}); 
</script> 

Answer 1

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

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

Вы также можете использовать $(function(){}); как shorcut к $(document).ready(function(){});

<script type="text/javascript" > 
$(function(){ 
    init(); 
}); 

function init(){ 
    someFunction(); 
    //other init stuff 
} 

function someFunction(){ 
    setTimeout(function(){ 
    $(".flash").fadeOut("slow", function() { 
    $(".flash").remove(); 
    }); }, 2000); 

} 
</script> 

Answer 2

нет, вам не нужно, просто поместите его в сингл и вызовите все функции оттуда;

<script type="text/javascript" > 
$(document).ready(function(){ 
     func1(); 
     func2(); 
     ... 
}); 
</script> 

Answer 3

Прежде всего, вы можете сократить, что:

<script type="text/javascript" > 
    jQuery(function() { 
     ... 
    }); 
</script> 

Во-вторых, если вы хотите, чтобы ваши скрипты для запуска, когда страница завершена загрузка, тогда да, вы должны поместить их в функцию jQuery/document.ready(). Вы можете поместить их все в один и тот же блок jQuery(function() { }), хотя они будут выполнены по порядку, вам не нужно их разделить.

Для расширения выработок function() {} блоков:

jQuery(/* do something */); 

средства "при загрузке страницы, сделать что-то". Это «сделать что-то» является функцией. Вы можете передать его функции непосредственно, как это:

function myFunction() { 
    ... 
} 

jQuery(myFunction); 

Вы определили функцию «myFunction» и сказал, JQuery, чтобы выполнить его при загрузке страницы. Обратите внимание, что вы просто передаете функцию непосредственно в jQuery, без (). Если вы вместо этого напишите jQuery(myFunction());, это будет немедленно исполнено myFunction(), и все, что возвращается myFunction(), будет размещено в jQuery(), и это будет выполнено при загрузке страницы. Это немного отличается от языков, таких как PHP, поскольку в PHP желательно, чтобы все сразу выполнялось, в Javascript, что не обязательно так. В PHP вы не можете передать функцию самостоятельно, в Javascript вы можете. Функции в Javascript намного больше похожи на переменные.

Что вы обычно делаете это «составляют функцию на лету», который содержит некоторый блок кода, который вы хотите выполнить в более позднее время:

jQuery(function() { 
    foo(); 
    bar(); 
}); 

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

Answer 4

Проблема в том, что вы не понимаете, что такое готовое событие и зачем оно вам нужно.

Представьте, что страница еще не загружена полностью, и вы пытаетесь что-то изменить на ней с помощью javascript, и поскольку код для этого элемента HTML, который вы пытаетесь манипулировать, еще не загружен, все идет не так.

Готовое мероприятие решает эту проблему. Любая функция (чаще всего одна anonymous function), которую вы связываете с , готовое событие выполняется, как только все elements in the document готовы к обходу и управлению. Считается плохой практикой иметь встроенный javascript. Если вы хотите, чтобы на вашей странице было событие (щелчок, наведение и т. Д.), Вы должны вызвать его внутри функции $ (document) .ready().

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

Я не понимаю, чего вы пытаетесь достичь, выполнив этот же кусок кода пять раз ... поэтому я не могу вам помочь.

Я надеюсь, что это объяснение поможет вам решить вашу актуальную проблему.

Answer 5

Я думаю, что оригинальный плакат с просьбой, если он должен сделать это:

<script> 
$(document).ready(function(){ 
     func1(); 
}); 
</script> 
<script> 
$(document).ready(function(){ 
     func2(); 
}); 
</script> 

Или, если он может просто сделать это:

<script> 
$(document).ready(function(){ 
     func1(); 
     func2(); 
}); 
</script> 

В последнем примере, есть один сценарий и один документ готов. Гораздо чище. Я считаю, что ответ «да», вы можете сделать это позже без каких-либо проблем.