将JavaScript（codepen）添加到我的Rails应用程序时未定义函数

Question

我正在尝试将此代码添加到我的Rails 5应用中：https://codepen.io/marklocklear/pen/jjGLRx

我在app / assets / javascripts中创建了一个名为stopwatch.js的文件，并将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() {
  ...
};

另一种解决方案是摆脱HTML中的onclick属性，并使用jQuery事件绑定。

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