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

Question

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

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); 

}); 

Answer 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() {.)

Answer 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 делает некоторые хитрости, чтобы определить функции, прежде чем что-либо еще выполняется в том же блоке: Why can I use a function before it's defined in Javascript?

Answer 3

In shor т да вы должны определить его, прежде чем использовать функцию, но вы можете использовать функцию 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(); 
    }; 

}); 

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

Answer 4

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

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

Функция Expression & Функция торможение

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

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's name is " + name); 
} 
Name("Chloe"); 

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

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