Должна ли быть определена функция Javascript до ее вызова?

Если я запустил функцию ниже, прежде чем определять ее, я получу эту ошибку...

Uncaught ReferenceError: openModal is not defined

затем определите

$(document).ready( function() {

    delay(openModal, 2000);

    delay = function (f, t) {
        setTimeout(function() {
            f();
        }, t);
    };

    openModal = function () {
        $('#modal-box').css( {
            left: $(window).width() / 2 - $('#modal-box').width() / 2,
            top: $(window).height() / 2 - $('#modal-box').height() / 2
        } );
        $('#modal-box').show();
        $('#modal-mask').show();
    };  

});

Теперь, если я сначала определяю функцию, а затем вызываю ее, у меня есть фон в PHP, поэтому я привык к возможности доступа к функциям во всем мире, я делаю что-то неправильно или все функции должны быть определены прежде чем они могут быть использованы?

$(document).ready( function() {

    delay = function (f, t) {
        setTimeout(function() {
            f();
        }, t);
    };

    openModal = function () {
        $('#modal-box').css( {
            left: $(window).width() / 2 - $('#modal-box').width() / 2,
            top: $(window).height() / 2 - $('#modal-box').height() / 2
        } );
        $('#modal-box').show();
        $('#modal-mask').show();
    };  

    delay(openModal, 2000);

} );

Ответ 1

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

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

$(document).ready( function() {

    delay(openModal, 2000);

    function openModal() {
        $('#modal-box').css( {
            left: $(window).width() / 2 - $('#modal-box').width() / 2,
            top: $(window).height() / 2 - $('#modal-box').height() / 2
        } );
        $('#modal-box').show();
        $('#modal-mask').show();
    };  

});

(Обратите внимание на разницу в области. Однако, когда вы создаете переменную openModal неявно, просто используя ее, она будет создана в глобальной области и будет доступна для всего кода. Когда вы объявляете функцию внутри другой функции, он будет доступен только внутри этой функции. Однако вы также можете сделать переменную локальной функцией, используя var openModal = function() {.)

Ответ 2

Переместите определение функции вне блока document.ready, и все будет работать так, как вы ожидаете. В javascript (как на большинстве языков) вы должны определить функцию или переменную, прежде чем ссылаться на нее.

В первом примере вы ссылаетесь на openModal в вызове delay(), но javascript не знает, что еще openModal.

openModal = function () {
    $('#modal-box').css( {
        left: $(window).width() / 2 - $('#modal-box').width() / 2,
        top: $(window).height() / 2 - $('#modal-box').height() / 2
    } );
    $('#modal-box').show();
    $('#modal-mask').show();
};

$(document).ready( function() {
    delay(openModal, 2000);
});

изменить

TJHeuvel указывает, что function выполняет некоторые обманки для определения функций до того, как что-либо еще выполняется в одном блоке: Почему я могу использовать функцию до ее определения в Javascript?

Ответ 3

Я бы сказал, ДА. Перед вызовом всегда должна быть определена функция. Но некоторые функции можно вызывать (вызывать) до того, где они были определены (ПОДГОТОВКА)

Два разных типа функций, о которых я хочу написать, следующие:

Функции выражения и функции замедления

1- Функции выражения: выражение функции может быть сохранено в переменной, поэтому им не нужны имена функций. Они также будут называться анонимной функцией (функция без имени). Чтобы вызывать (вызывать), они всегда нуждаются в использовании имени переменной. Эти функции не будут работать, если вызовы до того, где они были определены, что означает, что здесь не происходит подъем. Мы всегда должны сначала определить функцию выражения, а затем вызвать его.

let lastName = function (family) {
 console.log("My last name is " + family);
};        
let x = lastName("Lopez");

Вот как вы можете писать в ES6:

lastName = (family) => console.log("My last name is " + family);
x = lastName("Lopez");

2 Функции замедления: объявленные функции со следующим синтаксисом не выполняются немедленно. Они "сохраняются для последующего использования" и будут выполняться позже, когда они будут вызваны (вызваны). Этот тип функций работает, если вы вызываете их ПЕРЕД или ПОСЛЕ того, где они были определены. Если вы вызываете функцию замедления до того, где она была определена - Подъем - работает правильно.

function Name(name) {
  console.log("My cat name is " + name);
}
Name("Chloe");

Пример подъема:

Name("Chloe");
function Name(name) {
   console.log("My cat name is " + name);
}

Ответ 4

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

$(document).ready( function() {

    setTimeOut('openModal()', 2000);

    openModal = function () {
        $('#modal-box').css( {
            left: $(window).width() / 2 - $('#modal-box').width() / 2,
            top: $(window).height() / 2 - $('#modal-box').height() / 2
        } );
        $('#modal-box').show();
        $('#modal-mask').show();
    };  

});

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