Функция не определена при добавлении javascript (codepen) в мое приложение Rails

Question

Я пытаюсь добавить этот код в мое приложение на Rails 5: https://codepen.io/marklocklear/pen/jjGLRx

Я создал файл с именем stopwatch.js в app / assets / javascripts и поместил код JS, заключенный в:

$(document).ready(function() {
  ...JS code from codepen
});

Когда я нажимаю кнопку «Пуск» в моем приложении Rails, я получаю консольное сообщение:

edit:63 Uncaught ReferenceError: startWatch is not defined
    at HTMLButtonElement.onclick (edit:63)

Кроме того, в application.js у меня есть:

//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

Чтоя скучаю?

Answer 1

Код, выполненный из атрибутов HTML, выполняется в глобальной области видимости. если вы поместите код внутри

$(document).ready(function() {
  ...JS code from codepen
});

тогда функции объявляются в области действия этой функции, а не в глобальной области действия.

Нет необходимости помещать определения функций в $(document).ready. Вам нужно только поместить код, который не должен запускаться, пока не будет загружен DOM. Функции не запускаются до тех пор, пока они не будут вызваны, и этого не произойдет, пока пользователь не нажмет на элементы, что, очевидно, не может произойти до загрузки и отображения DOM.

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

function stopWatch() {
  ...
}

до

window.stopWatch = function() {
  ...
};

Другое решение - избавиться от атрибутов onclick в HTML и использовать привязку событий jQuery.

$("#start").click(startWatch);
$("#reset").click(resetWatch);